使用cli-4.x搭建vue项目详情过程

前言

cli-4.x已经发布很久了，斟酌了很久，仍是决定将原来的cli-2.x升级到4.x,详细的升级过程能够 戳这里

一、建立项目 vue create vuetest

二、选择配置方式

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

这里我选择的是手动配置（使用↑ ↓箭头切换，Enter确认，箭头切换失效能够戳这里），固然若是你以前有保存过配置模板的话，在这里还会有第三个选项就是你以前保存过的（下面会说到），由于想一想配置的不是不少，因此习惯了每次都是手动配置

三、手动配置项选择

经过↑ ↓ 箭头选择你要配置的项，按 空格 是选中，按 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编译器)
> Sass/SCSS (with dart-sass)   ☜(保存后编译)
 Sass/SCSS (with node-sass)    ☜(实时编译)
 Less
 Stylus
----------------------------------------------------------------------------------------
?Pick a linter / formatter config: (Use arrow keys) ☜(选择语法检查规范)
> ESLint with error prevention only                 ☜(只进行报错提醒)
 ESLint + Airbnb config                             ☜(不严谨模式)
 ESLint + Standard config                           ☜(正常模式)
 ESLint + Prettier                                  ☜(严格模式)
 TSLint (deprecated)                                ☜(typescript格式验证工具)
----------------------------------------------------------------------------------------
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)  ☜(选择何时进行代码规则检测)
>(*) Lint on save                                    ☜(保存就检测)
( ) Lint and fix on commit                          ☜(fix和commit时候检测)
-----------------------------------------------------------------------------------------
? Pick a unit testing solution
>(*) Mocha + Chai           ☜(mocha灵活,只提供简单的测试结构，若是须要其余功能须要添加其余库/插件完成。必须在全局环境中安装)
( ) Jest                    ☜(安装配置简单，容易上手。内置Istanbul，能够查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect)
------------------------------------------------------------------------------------------
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)  ☜(选择如何存放配置测) 
> In dedicated config files   ☜(独立文件放置) 
 In package.json              ☜(放package.json里) 
 -----------------------------------------------------------------------------------------
 ? Save this as a preset for future projects? (y/N)    ☜(保存上述配置，保存后下一次可直接根据上述配置生成项目，就是上面提到的第三种状况) 
复制代码

到这里配置就基本完成了，等待项目加载各类包...

加载完成后，进入项目，npm run serve启动就能够了...

好了今天就到这里了

转载需标注，谢谢~.~