13. Vue CLI脚手架

一. Vue CLI 介绍

1. 什么是Vue CLI?

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性。

• CLI的全拼是Command-Line Interface, 命令行界面, 俗称脚手架
• 它是一个专门为单页面应用快速搭建繁杂的脚手架,可以轻松的创建新的应用程序,而且可用于自动生成vue和webpack的项目模板。
• 如果开发大型项目, 我们必然需要使用Vue CLI
• Vue CLI为我们提供了清晰的代码目录结构, 项目结构、部署， 热加载，单元测试等功能。可以提高开发者的工作效率。

2. Vue CLI依赖的环境

二. Vue CLI 脚手架安装

第一步： 安装NodeJs

官网下载nodejs: https://nodejs.org/en/

然后解压安装, 查看nodejs的版本

node -v

第二步： 安装全局webpack

webpack有全局安装和局部安装. 全局安装是所有服务共有. 局部安装是对某个项目单独安装webpack的版本. 全局webpaack和局部webpack版本可以不一样

npm install webpack -g

第三步： 安装局部本地webpack

安装局部webpack npm install webpack --save-dev

第四步：安装Vue Cli 脚手架

这里需要说名Vue CLI版本的问题. 现在在用的Vue CLI的版本有2, 3, 4. 他们到底有什么区别呢? vue2和vue3的差别很大, vue3和vue4的差别较小.下面详细说说他们的区别

1. vue2, vue3, vue4的区别

• 安装, 卸载 vue-cli2

全局安装：npm install -g vue-cli 或 cnpm install -g vue-cli
卸载：npm uninstall -g vue-cli 或 cnpm uninstall -g vue-cli

vue-cli3 和vue-cli4

全局安装：npm install -g @vue/cli@版本号 或 cnpm install -g @vue/cli@版本号
卸载：npm uninstall -g @vue/cli@版本号 或 cnpm uninstall -g @vue/cli@版本号

可以使用@指定版本号, 如果不指定版本号, 默认下载的是4的版本

• 项目创建 vue-cli2：

vue init webpack demo

vue-cli3和vue-cli4

vue create demo 

• 项目结构 vue-cli2:

vue-cli3和vue-cli4:

• 项目启动 vue-cli2:

npm run dev

vue-cli3和vue-cli4

npm run serve

以上区别都是宏观表现上的不同, 具体到代码级别, 我们会后面继续说

因为现在vue2,3,4都有使用, 所以, 我们学的时候都会学习.

2 安装vue脚手架

vue-cli官网: https://cli.vuejs.org/, 执行安装命令:

npm install -g @vue/cli

查看安装的版本

vue -V 或者 vue --version

b)安装旧版本的vue

使用旧版本的 vue init 功能, 可以全局安装一个桥接工具

npm install -g @vue/cli-init

然后, 在执行

三、Vue CLI脚手架搭建项目

我们安装的时候, 安装vue4, 但我们的项目可能是老版本的项目. 或者我们想要创建老版本的项目. 我们可以在安装一个vue的桥接工具.

1. 搭建vue2的项目.

下面, 我们想要创建一个vue2的项目, 首先: 安装vue的桥接工具.

npm install -g @vue/cli-init

现在就可以创建vue2的项目了.

接下来创建项目

vue init webpack my-project

首次创建项目, 会去下载component组件. 这个下载过程很慢, 我们可以采用离线下载cli-component的方式.

2. 离线安装vue-cli

通过vue-cli工具命令vue init webpack vuedemo创建vue项目的时候报错，提示连接超时

 vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 192.30.253.112:443

解决办法有两个

a. 使用cnpm. 安装一个淘宝镜像
b. 下载离线组件包, 然后离线安装

这里重点说一下第二个方案:

第一步: github下载vue-cli component

https://github.com/vuejs-templates/webpack

如果打开github很慢, 可以试用github加速器打开

https://toolwa.com/github/

第二步: 下载之后的压缩包为webpack-版本号.zip，我们解压之后，需要更改目录名为webpack

然后在用户目录下创建一个文件夹: .vue-templates, 注意ve-templates前面的点(.) 我们再进行vue init webpack vuedemo命令的时候，需要带上参数--offline表示离线初始化

vue init webpack vuecli2 --offline

然后会提示有很多选项, 根据需要选择.

第三步: 然后运行命令启动项目即可.

npm run dev

看到下面的页面就成功了

四. vue脚手架安装时的含义及项目结构

1. vue脚手架安装时各项的含义

我们安装vue-cli脚手架的时候会有很选项, 那这些选项应该如何选择呢?如果我们知道他们是什么含义,就知道该怎么选择了.下面就来说说每一项是什么含义

1. Project name: 输入项目的名称

2. Project description: 项目描述

3. Author: 作者姓名,邮箱. 这里是来源于我们设置的全局的git用户名和邮箱

4. Vue build: 构建方式. 构建方式有两种,如下所示:

• runtime + compiler: 推荐大多数用户选择这种方式
• vue脚手架安装时的含义: 这个比runtime+compiler的方式更轻量, 但是只允许在.vue结尾的文件中使用模板

初步看来, 好像我们开发环境应该选择runtime+compiler, 生产环境使用Runtime-only更合适. 那具体如何呢? 后面我们来验证一下:

在template这行最后面多了一个逗号, 系统编译出错

5. Install vue-router: 是否安装vue-router

这里我选择的否, 因为刚开始用不到, 用到的时候, 我再加上

6. Use ESLint to lint your code: 是否对你的代码使用ESLint规范

这个含义是: 如果我们对代码使用了es规范, 那么如果不符合规范,在编译的时候就会报错. 这里可以选择, 也可以不选择, 刚开始学习,我们可以先不使用. 用和不用的效果:当代码中有不规范的内容时,就会报错. 比如在行尾加;

手动开启|关闭ESlint

修改index.js总配置文件, 修改参数useEslint来控制是否开启Eslint代码校验

useEslint: true,

7. Pick on ESLint preset: 选择使用eslint的标准

也就是格式化代码的标准. 有三种选择, 通常我们都选择Standard

8. Set up unit tests: 是否使用单元测试

刚开始我们不需要单元测试, 所以选择no

9. Setup e2e tests with Nightwatch: 是否设置端到端测试?

我们刚开始也不需要, 所以设置为no

10. Should we run npm install for you: 使用什么命令. 有三种选择

通常我们选择第一种npm