Vue CLI

一、 Vue CLI 简介

Vue CLI是 Vue 官方提供的一个工具，这个工具可以用来进行项目的辅助开发，如果只是一个语法类型的小 demo ，那么没必要使用这个。

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，称为脚手架工具。

Vue CLI 并不是给 Vue 提供了某些功能，它是帮助我们进行项目构建的一个工具。

Vue CLI 是 Vue.js 开发的标准工具，所以开发 Vue 文件时一般使用 Vue CLI 配套操作。

为什么使用 Vue CLI 进行项目构建？/Vue CLI 作用/Vue CLI 特性

统一项目的架构风格

当多人进行合作开发一个项目时，每个人书写的项目的架构风格可能会有所不同，例如文件的组合方式、目录设置方式等（例如，在项目中设置一个 js 目录，这个目录中会有一些 js 文件，有的人叫 js 目录，有的人可能叫 common，tools等各种名称），互相查看项目时可能就看不懂了；或者在做一些开源项目时，放在 GitHub 上其他开发者不知道目录中各个文件的含义，就需要看文档，文档中写 A 目录什么含义，里面有什么文件，B 目录...当有很多项目开发时，每个目录结构都不一样，不利于项目整体大环境的发展。所以 Vue CLI 帮助我们定制一套统一的项目架构风格。

初始化配置项目依赖

例如当前项目可能要使用预编译工具，以前就需要单独对这些依赖项进行单独处理，而 Vue CLI 可以通过选项帮我们自动完成项目依赖的配置处理。

提供单文件组件

组件是 Vue 功能的基础，功能通过一个一个的组件来组成，组件是由结构、样式和逻辑来构成。在进行功能设置时，一般是结构和逻辑在一起，但是样式分开，书写多个组件时，在<script>标签里就存在很多组件结构，如果要进行维护的话就需要到代码中查找，很不方便。所以 Vue 中提供了一个叫单文件组件的文件结构，表示单个的一个文件就是一个组件，将关于这个组件所有的结构、样式、逻辑都书写在这个文件，再通过 Vue CLI 的处理，帮我们自动处理为可运行的一种形式。那么这样，书写时可维护性比较高，进行处理后又变成可运行的文件，对于我们的项目非常有帮助。

Vue CLI 操作方式：命令行工具。Vue CLI 本质上是一个命令行工具，所以学习 Vue CLI 时本质是学一些命令，通过命令去控制 Vue CLI 进行项目的一些操作。

二、 Vue CLI 安装

采用 npm 的方式进行安装。（-g采用的是全局安装方式，全局安装才能使用）

安装命令：npm install –g @vue/cli

升级命令：npm update –g @vue/cli

打开 VS Code ，打开一个文件夹，然后键盘 Ctrl + ~ 打开终端

首先输入 npm -v 查看是否安装 npm ，只要出现了版本号就说明 npm 的相关功能可以正常使用：

接下来输入 npm install –g @vue/cli 通过 npm 安装 Vue CLI ：

不确定是否安装成功可以使用 vue --version 命令查看是否安装成功：

出现了 Vue CLI 的版本号说明安装成功。

因为是全局安装，所以只需要安装一次 Vue CLI 即可，以后新建项目只需要使用命令新建即可。

这里出现了一个错误：

不确定是否安装成功，所以使用 vue --version 命令查看是否安装成功，结果报错：

这是因为用户权限不足导致无法加载文件，以管理员身份运行终端或者通过命令解决此问题。

解决此问题参考博客：vue : 无法加载文件 C:\Users\…\npm\vue.ps1，因为在此系统上禁止运行脚本。_vue无法加载文件-CSDN博客

1. 输入get-ExecutionPolicy查看执行策略。如果它回复Restricted，表示是禁止的（确实是Restricted）

2. 输入set-ExecutionPolicy修改执行策略，要求我们输入修改的值，输入"RemoteSigned"，然后还需要输入"Y"确定更改执行脚本。

3. 如果没报错，大概率修改成功了，但博主遇到报错的情况了：

4. 按照要求输入Set-ExecutionPolicy -Scope CurrentUser，然后输入“RemoteSigned”解除受限状态。这时候不再报红色的提示信息了：

5. 最后再次输入get-ExecutionPolicy查看执行策略，已经变成RemoteSigned了：

成功解决问题，Vue CLI 5.0.8 成功安装。

三、 Vue CLI 项目搭建

1. 准备工作

首先在电脑新建一个文件夹，在VS Code打开：

键盘 Ctrl +~ 进入终端。

项目搭建之前首先确定是否安装好 Vue CLI ：vue --version或者 vue -V

上述操作完成后通过 cls 命令清除屏幕，下面进行项目搭建。

2. 创建项目

创建项目命令如下：vue create 项目名称，例如 vue create project-demo。

当前创建的是 Vue CLI 统一的的项目目录结构。

3. 预设项目功能

第二步选择项目预设的功能，这里提供一些选项让我们选择当前项目依赖于哪些工具。

选择 Preset （预设）：

有三个选项（通过键盘的上下箭头控制选择哪个）：第一个和第二个选项都是Default ，不同点在于一个是是 Vue2版本的，一个是Vue3版本，后面都是babel和eslint，其中babel是JavaScript语法进行降级处理的工具，eslint是语法风格检测的工具。 Vue 2.几是比较常用的，Vue 3.几比较新所以不常用。

这里选择Vue2 的那个Default，点击回车。

一般选择第三个（手动选择功能），会在第7步讲解。

4. 选择包管理器

我这里没有出现这一步，直接跳到了第5 步。

选择包管理器（用哪个工具管理依赖包），一个是 Yarn ，一个是 NPM。

这里选择 NPM，回车。

5. 创建完成

前面的选择完成后，创建就完成了，这时会给予一个创建完成的提示：

Successfully created project 项目名称 .

创建完成后给了两条命令，首先使用第一条命令 "cd 项目名称"进入到当前项目目录下；然后使用第二条命令 "npm run serve" 启动项目。

6. 其他情况

在项目创建过程中如果想终止创建可以用“Ctrl+C”，第一次点会出现“终止批处理操作吗（Y/N）？”，多点几次“Ctrl+C”就可以停掉项目创建过程。

停掉后演示一下其他的预设方案。

如果还是输入“vue create vue-demo”，提示当前目录已经存在并给出选项：

这里选择 Overwrite，然后再次出现：

前两个已经讲过，这里来看第三个选项：手动选择功能，即预设项目与真正要使用的项目需求功能不一样，希望增加一些功能或者减少一些功能，这时就需要自定义。一般搭建项目时，需求都是不一样的，所以推荐使用手动选择。

选择第三个选项后出现一个列表：

括号前的*代表当前项被选中了。

这里让我们自己选择希望用哪些功能或工具，Bable是JavaScript处理工具要选；Router是 Vue Router 需要所以选上（按上下键到达这个选项后点击空格即可选上，再次点击空格即可取消）；CSS Pre-processors 是CSS预处理器，需要所以选上；Linter / Formatter 是代码风格，要选；全部选择完成后点击回车。

回车后会弹出让选择 Vue 的版本，选择是2.几还是3.几，一般选择2.几，即2.x

接下来选择 Vue Router：

Vue Router 有 hash和history两种模式，如果想用 history 模式就写 “Y”，否则就写“n”。这里选择 hash，所以写“n”。

接下来选择 CSS 预处理器：

这里选择 Less。

接下来选择代码风格：

这里选择最后一个 ESLint + Prettier 。

接下来一个选项，什么时候进行代码风格的检查，即什么时候使用 linter 的功能：

第一个是 lint 被保存的时候，选择这个，点击回车。

接下来一个选项，这些配置工具在什么地方保存：

第一个是在一个单独文件中保存，第二个是保存在 package.json 文件中。

这里选择第一个，单独文件保存，可以存在 package.json 文件，但是package.json 里面有很多其他东西，内容较多，所以希望分开存，便于管理。

是否保存这个预设为以后项目使用？（如果后续项目跟这个类似就选择Y，后续用不到就选N）

这里演示一下保存，选择Y。

那么紧接着就会询问保存这个预设的名字，这里给他起个名字“demo-preset”：

点击回车就会开始项目搭建：

项目搭建完成后提示：

7. 运行项目

首先要进入到项目中才能运行项目：cd vue-demo

工作路径换到项目中后进行运行项目命令： npm run serve

项目运行成功后就不需要再次运行，以后只需要修改代码查看效果即可。

输入完成后给予提示，本地访问方式： http://localhost:8080/，VS Code中鼠标移到该网址，按住Ctrl+鼠标左键，进入到项目初始页面：

8. 删除预设文件

上面新建完项目后再新建项目，这时会发现在预设选择时多了一个选项：

如果想修改这个预设内容或者删除这个文件，那么需要找到这个文件保存的位置：

可以使用Vs Code 打开这个文件进行修改：

如果不想要这个预设，也可以将这个文件直接删除。

删除后再次新建项目时就不会出现之间那个预设，而只剩下三个原始的选项了：

四、Vue CLI 目录与文件

1. 目录

之前说通过 Vue CLI 搭建的项目有统一的目录结构，这里讲解目录结构具体含义以及内部文件如何进行处理和操作：

public：当创建了 Vue CLI 项目后，可以通过 npm run serve 的命令进行预览，预览时有一个 HTML 页面，这个页面就保存在了 public 这个目录中。

src：src是资源的意思，资源中有很多文件和目录，第一个叫 assets，静态资源目录，内部可以存放例如图片相关的文件；第二个components，项目组件目录；第三个是 App.vue，根组件；第四个 main.js是项目的入口文件，在这里可以对项目功能进行一些基础配置。

在VS Code中：

2. 文件

接下来说明文件的处理方式：

第一个要说的就是单文件组件，单文件组件可以将组件的功能统一保存在以 .vue 为扩展名的文件中。

Vue 是由一个或多个组件组成的，每个组件都有模板、视图和逻辑三个部分，传统操作中这三部分是分开的，现在通过 Vue CLI 提供的单文件组件就可以将这三个作为一个整体保存在一起。

单文件组件--HelloWorld.vue

例如在 components 中的 HelloWorld.vue，这个 HelloWorld.vue 是一个组件，从这里入口：

将内部内容合起来，可以看到里面有三个标签： <template>，<script>以及<style>：

① 单文件组件 -- <template>

<template> 是当前组件的结构或者叫模板，对应了以前在设置组件时的 <template>属性，以前 <template>属性在操作时需要以字符串形式书写，不管是使用普通字符串还是模板字符串，书写都很不方便，但是在这里的 <template>的书写方式跟直接书写 HTML 一样，写起来简便很多。内部书写内容跟以前一样，比如使用差值表达式等。

② 单文件组件 -- <script>

第二个 <script> 是关于当前组件的一些功能，这里注意：采用的是 export default ，这个是 ES6（ECMAscript6）中提供的 ES6 Module，通过这个进行模块导出，export default 导出的对象就是当前组件的配置对象。 name 是当前组件的名称，要与文件名相同；props中是外部组件给我们传递的一些数据，比如message，类型是 String。除此之外，例如要设置 data 跟这个也是一样的。

进行单文件组件设置时，每一个单文件组件是一个模块，需要将当前模块的核心功能导出，这就是用到了 export default 这个操作方式。后续当其他文件使用当前组件时，也需要相应的导入操作。

③ 单文件组件 -- <style>

第三个 <style> 中是关于当前组件的一些样式。样式上面设置了 scoped 属性，它的作用是 limit CSS to this component only ，使得设置的这些样式只能被当前组件所使用，也就是这里面写的对 h3，ul，li，a，设置的这些样式只会对当前组件内部的这些标签生效。这样设置使用起来很方便，相当于给 CSS 加了一个作用域。

一个组件被其他组件使用 App.vue

HelloWorld.vue 这个组件如果想在其他组件中被使用，如何处理？

找到 App.vue，这是根组件，也是有 <template>，<script>以及<style> 三个标签。

<template> 中有一个<img>还有一个HelloWorld ，说明使用了HelloWorld 组件，要使用就必须进行引入操作。

所以可以在 <script> 中看到使用 import 方式（也是ES6提供）来引入，路径是 "./components/HelloWorld.vue”意为当前同级目录下 components 目录中的 HelloWorld.vue。HelloWorld 导入完毕后，HelloWorld 就是当前组件的一个配置对象，将 HelloWorld 放到 components 中就是将 HelloWorld 组件作为当前组件的子组件使用。

main.js

App.vue 是根实例，但是并没有写 New vue 实例创建操作，因为 Vue CLI 把实例创建的步骤分到了 main.js 入口文件中了。

第一行 import Vue from "vue"; 这是引入包，就是引入 vue 文件的功能，不再需要像书写 HTML 页面一样书写 html 标签，写 script 用 src 引入，这里直接用这种方式直接导入 vue。

第二行 import App from "./App.vue"; 引入 App 模块，将根实例 App.vue 引入。

Vue.config.productionTip = false; 配置项，这个是关于生产的提示，在开发阶段我们希望进行错误提示，这对修改错误是有利的；当在上线阶段的时候，就希望错误日志越少越好，所以这里写“false”。但是如果当前是开发阶段，可以写成“True”也可以。

再下面的 new vue 创建实例，但是在进行 new vue 书写时内部对象并没有使用 el 进行挂载，而是通过 .$mount，这里说一下：之前讲解过两种用来选择结构选择模板的操作方式，第一种是通过 el，第二种是 .$mount。这里代码 .$mount("#app") 这里的“#app”其实对应的是 public 目录中的 index.html：

通过 .$mount 的方式进行挂载，那么内部的 render 是什么？在操作时，不管是通过 el 还是 .$mount 进行挂载以后，元素内部的内容都需要进行渲染操作，就是我们在内部写了一个模板，这个模板内容放到 app 那个元素中，用 render 方法给组件创建 dom 的函数，那就可以把接到的传到 h 函数中（h 叫什么都无所谓），h 方法处理完毕后就会得到一段 dom 的结构，然后设置渲染，这样就可以实现入口文件和根组件相分离的方式。

单文件组件跟传统定义组件的区别

通过单文件组件跟传统定义组件的区别：

模板结构：以前要通过 template 属性设置，现在设置更简洁
在设置组件时，把 CSS 也包含在了组件的结构之内
传统组件没有构建步骤，只能通过 html 或者 JavaScript 来设置，如果希望使用 less 这种预处理器的话还需要单独操作，而 Vue CLI 内部已经集成了相关功能，可以直接使用 Less 。

五、 Vue CLI 打包与部署

1. 打包

之前通过 Vue CLI 创建了项目，项目都是通过单文件组件也就是 .vue 文件来开发的，可以帮助我们将组件设置的更加清晰，提高可维护性；但是缺点在于，这个文件没办法直接被浏览器访问，如果我们希望我们的项目可以被用户查看的话，就需要将 vue 文件处理为相应的传统的 html，css，js 。这里所说的打包其实就是将 Vue CLI 项目中的文件转换成/编译成浏览器可识别的tml，css，js 等相关文件的操作。

打包就是将 Vue CLI 项目编译为浏览器可识别的文件。

打包操作可以通过 Vue CLI 提供的命令来执行：npm run build （注意要先 cd 进入项目目录）

打包完成输出了几个文件，这几个文件都存到了 dist 这个目录下。打包完成后可以在 VS Code 左侧看到多了一个 dist 目录，内部有很多文件，这些文件都是通过 Vue CLI 编译后的得到的，也就是打包后得到的，有 css，有 img，有 js ，有 favicon 图标，还有 index.html 首页文件。