使用vue cli4.x搭建vue项目的过程详解

2020-06-16 06:42:33易采站长站整理

cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里

1、创建项目

vue create vuetest

 

2、选择配置方式


? Please pick a preset: (Use arrow keys) ☜(使用箭头键)
> default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint)
Manually select features ☜(手动配置)

这里我选择的是手动配置(使用↑ ↓箭头切换,Enter确认,箭头切换失效可以戳这里),当然如果你之前有保存过配置模板的话,在这里还会有第三个选项就是你之前保存过的(下面会说到),因为想想配置的不是很多,所以习惯了每次都是手动配置

3、手动配置项选择

通过↑ ↓ 箭头选择你要配置的项,按 空格 是选中,按 a 是全选,按 i 是反选 (以下是每一个选项的详细解释)


? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel ☜(转码器,可以将ES6代码转为ES5代码)
( ) TypeScript ☜( js的超集,强类型语言)
( ) Progressive Web App (PWA) Support ☜(渐进式Web应用程序)
( ) Router ☜(vue-router(vue路由))
( ) Vuex ☜(vuex(vue的状态管理模式))
( ) CSS Pre-processors ☜(CSS 预处理器(如:less、sass))
(*) Linter / Formatter ☜(代码风格检查和格式化(如:ESlint))
( ) Unit Testing ☜(单元测试)
( ) E2E Testing ☜(集成测试)

根据自己项目的实际需求选择合适的配置

我这里是全选了 这里是后面会出现的配置详细信息


?Use class-style component syntax? (Y/n): ☜(是否使用babel做转义)

---------------------------------------------------------------------------------------
?Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? ☜(使用Babel与TypeScript一起用于自动检测的填充)

---------------------------------------------------------------------------------------
?Use history mode for router? (Requires proper server setup for index fallback in production) ☜(路由模式)

--------------------------------------------------------------------------------------
?Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ☜(CSS编译器)