通过对Vue 的学习我们发现vue还是比较简单上手容易，除了ES6语法和webpack的配置以外，重要的是思路的变换，从以前使用JQuery获取元素对象之后修改dom到Vue的mvvm，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、取消事件等。我们虽然掌握了语法但是和实际开发中相比还是有差距的，目前我们使用Vue使用通过引入vue.js文件实现环境搭建的，但是这在实际项目应用中我们需要引入大量的js文件，导致页面头部的引入js的代码臃肿，此时我们应当使用构建工具，也就是vue-cli，使用构建工具构建一个工程的时候，只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

10.1 Vue-cli的使用

Vue-cli的使用并不复杂，主要是命令的使用，目录结构已经操作步骤的学习。但是学习使用之前我们需要先了解我们为什么要使用Vue-cli，它到底是什么。紧接着便是vue-cli的使用步骤。

10.1.1 Vue-cli脚手架简介

先来思考目前我们搭建一个前端项目的麻烦之处：

• 项目依赖某个库时需要将库文件手动下载并通过离线的方式或者通过寻找cdn在线路径的方式引入库。
• 项目目录结构没有约束，由开发者自行设计，可能会造成目录结构混乱的情况。
• 项目打包需要使用到webpack,webpack的使用比较复杂。
• 项目不方便进行单元测试等。

为了解决以上问题，vue官方提供了vue-cli脚手架工具。vue脚手架的作用是用来自动一键生成vue+webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦。vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

简单来说脚手架可以理解为自动帮我们构建项目的工具。

10.1.2 Vue-cli安装和初始化

• vue的自动化构建工具是node.js帮我们做的，所以前提是安装了node.js。这里我们假设开发者的node已经nom环境已经搭建完成，我们接下来以@vue/cli 4.x 版本为例学习脚手架的使用。
• 安装vue-cli,打开vscode编辑器，在终端中输入命令：npm install -g @vue/cli，此步骤需要时间，等待安装完成。
• 检查vue-cl是否安装完成，安装命令执行无误并且提示安装完成后，输入命令：vue --version，确定vue-cli安装完成并查看版本。
• 使用Vue-cli创建一个vue项目，使用命令：vue create project_name。此命令会在当前目录下创建Vue项目所需要的文件夹以及文件，完成一个基本项目结构目录的搭建。在创建项目过程中需要开发者配置，内容参考如下。

#提示选择preset

Default ([Vue 2] babel, eslint) //默认vue 2 中的预设

Default (Vue 3 Preview) ([Vue 3] babel, eslint) //默认vue 3 中的预设

Manually select features //手动选择

单页面应用

#手动选择

Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) //选择将来项目中用到的依赖 空格：选择 a：全选 i：反选

这样我们便在vscode中使用了Vue-cli得到了一个Vue项目，我们会发现其目录结构有很多，还有默认生成的一些文件，这写就是我们本小节学习的重点，为了方便理解记忆，这里将各个文件夹以及文件的工作作用绘制成图，如图10-1所示。

图10.1 vue项目结构

10.1.3 使用图形化界面初始化vue项目

对于一些初学者来说使用命令的方式相对比较吃力，因为操作不够直观，Vue-cli还提供了图形化界面的方式初始化Vue项目，最终的结果都是一样的。图形化界面的方式也比较简单，在安装完成并且测试脚手架环境无误之后可以使用“vue ui”命令来代替“vue create”。vue ui命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建，浏览器窗口如图10.2所示。

图10.2 图形化界面

10.2 单文件组件

一般来说前端页面中主要是.html文件，其中为了分开维护JavaScript代码以及css样式我们会创建外部的.js文件和.css文件分别编写JavaScript和css代码。这种方式有自己的好处，但是在vue中有一中方式叫做单文件组件，在本小节中我们主要讨论单文件组件，简单来说单文件组件就是把一个组件全部内容汇合到一个文件中，文件名字是以 .vue 结尾的就称作 vue单文件组件。

10.2.1 什么是单文件组件

把一个组件全部内容汇合到一个文件中，文件名字是以 .vue 结尾的就称作 vue单文件组件。也就是说一个.vue文件中包含三部分内容，分别对应html，javasc，css的代码，并且三部分内容有各自的书写位置。结构的固定的如以下代码所示。

<template>

相关html标签

</template>

<script>

export default {

data,

methods,

computed,

filters,

created,

……

}

</script>

<style>

css样式内容

</style>

语法解释：

.vue文件中没有跟标签，存在并列关系的三个标签，从上到到下的固定顺序是template,script,style

• template标签内部表单静态的html标签，相当于html文件中body标签内部编写的内容
• script标签内部是js的代码编写区域，其中export 用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象。之前我们书写的new Vue代码编写在此位置，我们发现其中定义了data,methods，生命周期函数等选项。
• style标签内部编写css样式语法

10.2.2 为什么使用单文件组件

在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。

这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：

• 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
• 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
• 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
• 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器

文件扩展名为 .vue 的 single-file components(单文件组件) 为解决上述问题提供了解决方法这也就是为什么使用单文件组件。

102.3 怎么看待单文件组件

一个重要的事情值得注意，关注点分离不等于文件类型分离。在现代 UI 开发中，我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来，把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。

即便你不喜欢单文件组件，你仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译。如以下代码所示。

<!-- my-component.vue -->

<template>

<div>This will be pre-compiled</div>

</template>

<script src="./my-component.js"></script>

<style src="./my-component.css"></style>

3.3 本章小结

• vue脚手架的作用是用来自动一键生成vue+webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦
• vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板
• npm install -g @vue/cli命令用于安装脚手架环境。
• vue --version查看脚手架版本，验证是否安装成功。
• vue create命令行的方式创建vue项目。
• Vue ui图形化界面的方式创建vue项目。
• 把一个组件全部内容汇合到一个文件中，文件名字是以 .vue 结尾的就称作 vue单文件组件就是单文件组件
• 单文件组件包含template,script,style三个部分。

3.4 理论习题与实践练

1.思考题

1.1 请简述vue的优点。

1.2 请简述vue和jQuery的区别。

1.3 请简述vue起步的操作流程。

1.4 请简述什么是MVC，MVVM？

2.编程题

• 2.1 回顾vue起步的操作流程，独自完成vue环境搭建，并要求练习使用到插值，属性计算以及侦听器。