开发构建分享
了解概念
vue是一个构建用户界面的渐进式框架
vue-cli 是vue项目的脚手架工具
node是服务器上的JavaScript运行环境，可以理解为 Node = JavaScript+ 操作系统API
npm是包管理器，是 Node.js 平台的默认包管理工具，（yarn）
webpack 是一个静态模块打包器 （gulp grunt）
首先简单回顾上节课我们用vue开发的流程是怎样：
- 先写好html文件
- 引入vue.js
- 然后挂载在DOM节点上，然后编写
还记得这张图吗
一个页面可以看成是各个组件组装而成。
但是随着项目代码量越来越多，不可能所有的代码都是：
使用
Vue.component来定义全局组件，紧接着用new Vue({ el: '#container '})在每个页面内指定一个容器元素。
这样就会造成
- 组件名定义不能重复
- 字符串模板没有高亮提示
- css写入麻烦
- 没有构建步骤
所以vue就提供了单文件模板，一个以.vue 为后缀的文件，在这个文件里面html ，css，js分离，就像这样：
并且我们还可以针对html使用类似Pug的模板引擎，针对js使用Babel或Ty****peScript预处理器，针对css使用stylus或者lass的预处理器,来提升我们的开发效率,但问题又来了，浏览器并不认识后缀为vue的文件，该怎么办呢？
Vue Loader
但这一切都离不开Vue Loader，我们之所以能使用单文件模板，是因为Vue Loader的存在，Vue Loader是什么？
Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
所以这就涉及到 Webpack 了
Webpack
webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。
而loader又是干啥用的？
loader 用于对模块的源代码进行转换。loader 可以使你在
import或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中importCSS文件！
简单的说：浏览器并不认识后缀为 .vue 的单文件组件，那我们就需要把它转化为浏览器认识的js，HTML、css的文件，而Vue Loader 就是来干这个的
所以，你想使用单文件模板，就一定要使用Vue Loader，要使用Vue Loader 就一定要基于webpack，那么就一定要配置webpack
如何配置那又是另外一回事了。好在Vue提供了官方脚手架:Vue Cli 它帮助我们省去了webpack的相关配置，让我们直接使用单文件组件开发并且还提供了更多功能。
Node
要知道，Vue Cli 也是基于Node开发的。一切都离不开Node环境。
介绍Vue Cli
它是一个终端运行的程序，目的是为了快速构建vue的开发环境。这个程序包含了三个主要部分
一、Cli 它是一个全局npm包，提供了终端里面的命令
二、Cli 服务 也是个npm包，不过安装在每个项目里面，是构建于webpack-dev-server上的
三、CLI 插件 可供选择的各种npm包
使用Vue Cli
Vue Cli现在的最新的版本是3.x，而我们公司有些项目还是使用老版本构建的
我们会以最新的3.x的版本来操作，期间对比下老版本的工程目录
安装
创建
vue create hello-world
也可以使用 vue ui 命令来使用图形化界面创建项目
看创建好的目录
开发
Axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
Router
Vue Router 是 Vue.js 官方的路由管理器
Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态
打包构建优化
npm run build