vue脚手架创建项目

什么是脚手架（vue-cli）

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目以及更改对相应的webpack配置

通过脚手架创建项目

通过脚手架创建项目大致分为两类：一类是通过3.x版本的脚手架创建项目，一类是通过2.x版本的脚手架创建项目

无论是通过 3.x 还是 2.x 版本的脚手架创建项目都需要安装脚手架

脚手架的安装

首先，先说明一下，如果我们安装的是脚手架 3.x 版本，那么我们也可以使用 3.x 的脚手架通过 2.x 的方式来创建项目，但是如果安装的是 2.x 版本的脚手架是不能通过 3.x 的方式创建项目的

我这里安装的是 3.x版本的脚手架并且是全局安装

1.安装3.x版本的脚手架

npm install @vue/cli -g

2.安装 2.x 版本的脚手架

npm install vue-cli -g

3.查看脚手架的版本

vue -V

这里给出的安装脚手架命令都是全局安装，如果不想全局安装的话就把每行命令后的-g去掉即可

全局安装脚手架之后，以后如果再创建项目的话，就不需要再重新安装脚手架了

3.x版本以上脚手架创建项目

通过脚手架 3.x 版本 创建项目有两种方式，一种是在命令框中创建项目，一种是在图形化界面创建项目

命令框创建项目

1）输入创建命令

vue create 项目名称

2）选择 Manually select features点击回车
选择特性以创建项目，简单点来说自己的项目需要什么特性（组件、Vuex等），就可以选择哪一个来进行创建

3）选择特性
按空格选择，前面有 * 号代表已经选择
我这里只选择了 router，选择完成后点击回车

4）是否选用历史模式的路由：n

5） ESLint 选择
选择ESLint + Standard config

6） 何时进行 ESLint 语法校验
选择 Lint on save

7）babel，postcss等配置文件如何放置
选择In dedicated config files(单独使用文件进行配置)

8）是否保存为模板
自己根据自己的情况决定，我选择 n

9）使用哪个工具安装包
选择 npm进行安装

安装完成之后会出现如下界面

按照命令执行即可，之后会出现下面两个 url 随便哪一个在浏览器窗口打开即可

使用 ui 界面创建项目

1）输入命令

vue ui

2）进到如下界面创建项目







点击安装之后静待安装，安装完成之后执行如下操作

3.x 版本基于2.x的旧模板创建项目

在前面我们已经安装了 3.x 版本，那么你就不能使用 vue-cli2.x 版本

因为 3.x 和旧版使用了相同的vue命令，所以 2.x 被覆盖了，所以就不能使用2.x版本中的有些命令

但是如果还然想使用 2.x 的vue init功能，那么此时就需要全局安装一个桥接工具

npm install -g @vue/cli-init

安装完这个我们就可以创建项目了

1）初始化（创建）项目

vue init webpack 项目名称

此时会依次出现下面的内容

项目名称
? Project name (vue)
项目描述
? Project description (A Vue.js project)
源码解析准备
? Vue build
  - Runtime+Compiler
  - Runtime Only
是否安装路由
? Install vue-router?
检验你的代码是否符合规范
? Use ESLint to lint your code?
项目单元测试
? Set up unit tests (Y/n)
自动化测试
? Setup e2e tests with Nightwatch?
使用npm还是yarn
? Should we run `npm install` for you after the project has been created? (recommended)
 - Yes, use NPM
 - Yes, use Yarn 
 - No, I will handle that myself

我的选择

点击回车等待安装成功，安装成功之后根据提示执行命令，执行完，便可以在浏览器窗口输入给定的 url 查看效果

两个版本项目目录的对比

通过对比会发现，3.x 少了许多的许多的配置文件的目录（build、config等），因为 3.x 可以在根目录下新建一个vue.config.js文件，所有的配置都会在这个文件里直接配置

vue.config.js是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写

详见 官网是如何描述的