vue-cli3.x创建vue基础工程

本项目通过 vue-cli 3.x版本工具搭建

老版本请移步至 这里

安装vue-cli

全局安装3.x版本：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

如果有旧版请执行（卸载）：

npm uninstall vue-cli -g
# OR
yarn global remove vue-cli

如果项目中使用cli版本过多可以通过本地安装的方式

创建项目

创建项目：

vue create vue-base

界面如下：

• default (babel, eslint) 默认配置，只提供babel和eslint
• Manually select features 手动选择配置

这里选择手动配置，回车

所选配置界面如下：

使用空格键 选择/取消选择 配置

每个配置描述如下：

• TypeScript 支持 TypeScript 书写源码。
• Progressive Web App (PWA) Support 支持PWA。
• Router 支持 vue-router 。
• Vuex 支持 vuex 。
• CSS Pre-processors 支持 CSS 预处理器。
• Linter / Formatter 支持代码风格检查和格式化。
• Unit Testing 支持单元测试。
• E2E Testing 支持 E2E 测试。

选好配置，回车

是否使用class风格写法：

使用class风格的写法，也方便支持ts语法，选择Y，回车

使用 babel 工具自动为转换后的 TypeScript 代码注入 polyfiills :

选择Y，回车

路由是否使用history模式：

选择n，如果嫌hash模式丑可以选择YES，如果路由找不到，会导致后端返回404，需要后端处理统一返回，回车

css预处理：

提供三种主流预处理器选择：

• SCSS/SASS
• LESS
• Stylus

根据需要自由选择，我这里选less，回车

单元测试工具：

Jest集成度更高、功能更强大，但Jest基于jsdom，jsdom并不是真实浏览器环境，并不会真正渲染组件，会导致一些问题，这里我选择Jest，回车

e2e测试工具：

提供两款工具：

• cypress 断言Chai、Chai-jQuery 等 只支持 Chrome 类浏览器，有支持其他浏览器的计划
• nightwatch 断言assert 和 Chai Expect 需要安装配置 selenium，selenium-server需要安装jdk（Java Development Kit）。

我这里选择cypress，回车

各config配置项的位置：

选择 In dedicated config files ,在专用文件配置，不和package.json混淆，回车

是否保存这系列配置：

是否保存配置，我选择了Y，下次可以使用，回车

如果出现是否使用淘宝镜像作为npm registry，选择YES

等待初始化项目和依赖安装

项目启动

启动界面