手把手使用 vue-lic3.0 快速构建项目（全）

使用 vue-lic3.0 快速构建项目

• 安装前需要注意的地方：

• Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
• Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

 

• 可以使用下列任一命令安装vue-cli3：

• 使用yarn的话需要先去下载安装：

https://yarn.bootcss.com/docs/install/#windows-stable

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

•  安装完成后使用 vue -V 查看安装版本确认是否安装成功
•  注意 V 要大写的

        

•  接下来开始使用vue-cli3创建项目，先进入创建好的目录，然后输入命令 vue create hello ， hello为自定义项目目录名称

        

        这里提示选取一个 preset。第一个默认的包含了基本的 Babel + ESLint 设置的 preset，第二个是手动选择，手动选择会提            供更多的选项

•  我们这里选择第二个

         

        上下键移动，空格键选中，a全选，i反选 ，这里可以选择你需要的

• Babel：提供 babel 支持。
• TypeScript：支持 TypeScript 格式。
• Progressive Web App (PWA) Support：PWA 支持（渐进式Web应用程序）。
• Router：支持 Vue Router ，它是Vue.js 官方的路由管理器。
• Vuex：支持 Vuex ，它是一个专为 Vue.js 应用程序开发的状态管理模式。
• CSS Pre-processors：支持 CSS 预处理器，可以选择自己想要的处理器。
• Linter / Formatter：

Linter检查代码错误的小工具。
Formatter用来格式化文本，主要用在文本输出方面，比如，数字、日期、金额等。

• Unit Testing支持单元测试。
• E2E Testing支持 e2e 测试。

e2e 测试是一种测试方法，它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之，它从一个用户的角度出发，认为整个系统都是一个黑箱，只有UI会暴露给用户。
 

• 路由是否使用历史模式

      

      这里我选择了Y

• 选择css预处理器，自己按照需要选择就好

        

• 选择linter / formatter配置（我这里选择：ESLint + Prettier）

       

• 选择什么时候检查代码 （我这里选择保存检查）

       

 

•  你更喜欢将Babel、PostCSS、ESLint等配置放在哪里? （单独放，已经放在 package.json中，我这里选择第一个）
•  把这个作为将来项目的预置?(y / N) （选择y后下次就不用重新配置了）

         

• 好了，配置完成了接下来等待就好了

        

• 安装完成了，提示你进入到项目文件夹，然后输入 npm run serve 开始项目

        

• 成功运行显示下面信息