vue-cli 3.x 搭建项目

一、安装 @vue/cli

更新到 3.x 之后，vue-cli 的包名从vue-cli 改成了 @vue/cli

如果之前全局安装了旧版本的vue-cli (1.x 或 2.x)，首先需要使用以下命令卸载掉

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

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

安装完成后，可以使用 vue -V（这个 V 是大写的）查看版本号

二、创建项目的三种方式

1.x和 2.x的vue-cli 采用 init 命令创建项目

vue init webpack project-name

3.x也支持这种方式，其运行结果和以前一样

vue/cli 3.x 还新增了图形化的方式来创建项目

首先在指定目录下打开终端，运行：

vue ui

然后浏览器会打开一个页面，可以按照页面将的引导创建项目

但是最好还是使用命令行工具

vue create project-name //project-name是自定义的项目名称

三、参数详解

使用 create 命令创建项目的时候，有很多配置项需要选择

首先需要选择模块，可以上下键切换，单项选择直接回车继续下一步，多项选择可配合着空格选择不同的选项

如果选择默认选项 default，将会构建一个最基本的 vue 项目（没有 vue-router 也没有 vuex）

这里推荐选择第二项Manually select features 然后根据自己的需求，使用空格键选择具体的模块

default (babel, eslint)  默认配置，提供babel和eslint支持
Manually select features  自定义选择需要的功能，提供更多的特性选择。

TypeScript 支持使用 TypeScript 编写程序
Progressive Web App (PWA) Support PWA 支持，一般PC端是用不到。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。

下面：

Use history mode for router?*******history模式 这个看项目需要，history模式需后端支持，自行考虑

less/scss***我用的是less

代码规范，直接选Standard标准的规范就行了

最后选择是否将配置项保存为预设，然后配置完成，开始生成项目

项目生成之后，已经自动安装了相关的依赖项，这时候可以直接启动项目：

npm run serve