4. Vue CLI脚手架学习笔记

1 Vue CLI介绍

1.1 Vue.js

• Vue.js（读音：/vjuː/, 类似于：view） 是一套构建用户界面的渐进式框架

• Vue.js的官方网址是：https://cn.vuejs.org/

• 传统的前端开发框架大多是基于DOM（Document Object Model：文档 对象模型）的，在操作时，需要关心被操作的页面元素，甚至这些页面元 素的层级结构，核心思想是：先根据DOM找到对应的页面元素，然后再 进行相关操作，例如设计其样式，或配置某个事件

• Vue则是将必要的页面元素的相关属性（例如页面元素的样式、控件的值、 页面元素的事件等）与数据进行绑定，当实现绑定后，就不再需要关心页 面元素本身了，只需要关心各个数据即可，从而避免了大量繁琐的DOM 操作，也实现了页面设计与数据处理的分离

1.2 Vue CLI

• Vue CLI通常称为“VUE脚手架”，它是一个专门为单页面应用快速搭建 繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue 和webpack的工程模板

• Vue CLI相关文档的官方网址是：https://cli.vuejs.org/zh/guide/

• Vue CLI是由VUE提供的一个官方客户端（client），专门为单页面应用 快速搭建繁杂的脚手架

需要注意：在使用传统模式开发的前端工程中，各个页面是相对独立的， 甚至你可以在本地硬盘上找到对应的html文件并双击直接打开它，而Vue CLI工程与一个Web应用程序一样，是需要启动服务才可以访问的，一定 程度上，它的上手难度会更大一些，但是在中大型应用程序的开发中，它 在开发效率、管理和维护成本上有更大的优势

1.3 单页面

• 单页面，指的是在工程中，理论上只有1个HTML页面，只不过这 个页面的所有内容都是可以动态更新的，你随时可以使用新的页面内容替 换原有的内容，并且，你还可以使得URL一并更新，从用户体验上来说， 这种单页面应用与传统的前端应用并没有什么不同

• 单页面应用的工程中需要一定的配置，对配置文件的位置也有一定的要求， 整体工程结果并不像传统的前端应用工程那么自由，所以，手动创建这种 应用的成本较大，而Vue CLI则可以自动生成vue.js + webpack的工程模 板，是为现代前端工作流提供了Batteries-included（自含全套工具集） 的构建设置，只需要几分钟的时间甚至更短的时间就可以运行起来。

2 搭建开发环境

1. node.js安装: 详见node.js安装笔记

2. Vue CLI安装:

npm install -g @vue/cli

检查是否安装成功:

vue -V

3 创建第1个VUE CLI工程

通常使用Vue的命令来创建Vue CLI工程，并且，此命令会将工程创建在 执行命令时的位置，所以，先在命令提示符窗口中进入Vue Workspace， 例如（以下示例中的#开头是注释，不要执行）：

# 切换到D盘 d:
# 创建Vue的Workspace，文件夹名称为Vue-Workspace，是自定义名称 
# 如果Vue的Workspace已经存在，则不需要执行接下来这条命令 
# 如果使用IntelliJ IDEA开发VUE CLI工程，也可以直接使用IntelliJ IDEA的Workspace， 无强制要求 
mkdir Vue-Workspace 
# 进入D盘下的Vue-Workspace 
cd Vue-Workspace

使用vue create命令即可创建Vue CLI工程，命令格式是：

vue create 工程名称

例如执行：

vue create vue-project-01

创建过程中会有一些选项，最先提示的选项是Please pick a preset，表示“请选择一个预设项”，推荐选择Manually select features，表示 “手动选择功能”，通过键盘的上下箭头进行选择，选择到目标项后按下键盘的Enter键到下一步：

接下来的选项是Check the features needed for your project，表示 “选择你的工程中需要使用的功能”，推荐在列表中选择Babel、Router、 Vuex这3项，使用键盘的上下箭头移动，使用空格选中或取消选中，选择 完成后按下键盘的Enter键到下一步：

关于列表中主要的几个功能：

• Babel：ES6高级语法向低版本语法兼容的工具
• Router：路由管理器（管理请求路径与页面资源的映射关系，相关于Controller中 @RequestMapping）
• Vuex：全局状态管理工具（管理全局共享的内存中的数据，例如各页面需要使用到 的用户信息）
• Linter：初学者不建议勾选，是代码规范检验工具，其要求较严格

接下来的选项是Choose a version of Vue.js that you want to start the project with，表示“选择你的工程中希望使用的Vue.js的版本”， 推荐选择2.x这项，选择到目标项后按下键盘的Enter键到下一步：

接下来的选项是Use history mode for router，表示“是否在路由中选 择历史模式”，推荐选择“是”，我选择否，输入Y后按下键盘的Enter键到下一步 （提示信息中，Y是大写的，表示它是默认选项，不输入Y而直接按下 Enter键是等效的）：

接下来的选项是Where do you prefer placing config for Babel, ESLint, etc.?，表示“你习惯把一些配置信息存放在哪里？”，推荐选择 In package.json，即存放在package.json文件中，选择到目标项后按 下键盘的Enter键到下一步：

如果前面的Use history mode for router中选择了则会出现Save this as a preset for future projects?，表示“是否 保存以上配置信息，作为后续将创建的新工程的预设？”，推荐选择 “否”，输入N后按下键盘的Enter键（提示信息中，N是大写的，表示它 是默认选项，不输入N而直接按下Enter键是等效的）

如果还安装了yarn将会让你选择使用yarn或使用npm, 这里使用npm

创建成功：

执行

cd vue-project-01
npm run serve

启动成功：

访问：

http://localhost:8080

4 了解VUE CLI工程

4.1 Vue CLI结构

[]为文件夹

1. [node_modules]工程中使用到的模块，也可以理解为工程的依赖项， 例如Babel、Vue等框架的文件，不手动管理。

需要注意：如果是从Git或其它位置复制得到的工程，没有此文件夹，需要运行 npm install或者npm i，否则将无此文件夹及其下的各依赖项，工程将无法正常启动。

2. [public]：工程被编译打包后仍会保留的内容（文件内容可能会在编译打 包过程中修改）
   你可以自行在此文件夹下创建子级文件夹，用于存放公共静态资源，例如图片等。

3. public/index.html：默认的主页，通常不修改其内容。

4. [src]：页面源代码，除工程配置以外的所有开发都在此文件夹下

5. [src/assets]：资源文件夹，通常存放图片等, 放置需要经由 Webpack 处理的静态文件。

注意：仅不需要被程序动态控制的图片放在此处

6. [src/components]：视图组件，通常是可以被其它各页面复用的，是各 个.vue文件。

7. [src/router]：路由控制。

8. src/router/index.js：路由配置文件，除非工程中页面数量较大，或路 由关系复杂，否则使用这1个文件进行路由管理即可。

9. [src/store]：全局数据存储

10. [src/views]：视图组件 ，通常，每个页面在此文件夹都应该有1个对应 的文件，可引用[src/components]下的组件。

11. src/App.vue：默认的主页视图组件。

12. src/main.js：工程的主js文件，通常用于导入工程中将使用的其它库 – 此文件中所有import语句必须在最上方位置，各import语句不区分先后顺序。

13. .gitigore：用于配置使用Git提交工程时将忽略的文件和文件夹 。

14. bable.config.js：Babel的配置文件。

15. package.json：工程的管理配置文件，相当于Maven项目的pom.xml， 在不熟悉的情况下不要手动修改此文件的配置，可能需要关注的主要有：

• scripts：支持的2个npm命令参数，例如npm run serve、npc run build
• dependencies：运行时依赖项
• devDependencies：开发依赖项，将不参与打包

16. package-lock.json：工程的管理配置文件 。

17. README.md：工程的说明文档，用于开发人员编写如何使用、注意事 项、更新日志等内容，使用IntelliJ IDEA首次打开工程时，会自动打开此 文件，此文件的默认内容中提示了工程的运行命令 。

18. vue.config.js：Vue的配置文件。

4.2 视图组件

1. 所有以 .vue 为后缀的都是视图组件，根目录下的App.vue默认代码为：

<template>
  <div id="app">
    <nav>
      <router-link to="/">欢迎router-link> |
      <router-link to="/about">关于router-link>|
      <router-link to="/other">其它router-link>
    nav>
    <router-view/>
  div>
template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
style>

2. 可以看到此文件中主要有2个节点：