vue2.x学习笔记（一）

使用vue开发项目已经过了一段时间了，对其中的很多东西还是一知半解，于是想要系统学习一下。主要内容是参照官方中文网站https://cn.vuejs.org/v2/guide/，然后加上一些自己的理解与批注。

什么是vue.js

Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

上面的这段话引用至官方教程，其中有一些字眼比较难以理解，比如【渐进式框架】，比如【自底向上逐层应用】，还比如【为单页应用提供驱动】。

理解【渐进式框架】

事实上，渐进式（Progressive）这个概念在多个技术领域里都有不同的作用与理解，所以有理解成本也是在意料之中的。渐进式的现实例子有很多，比如网页中图片的加载方式演化就是一个经典的渐进式例子。

在很多年以前，网页中的图片，比如jpeg图片在页面中加载的处理方式，采用的默认处理方式都是从上至下一块一块地加载，直到完全加载。如果网络慢了或者是卡了，那么图片可能就只会加载一半，这时候对图片的整体内容没有一个大致的认知，对用户的整体感官体验就没有那么好了。因此在网页图片的加载方式引入了渐进式的概念，先加载整张图片的主体（模糊），再慢慢从模糊加载到清晰，这样一来用户体验相对来说会好一些。这里我们就可以得出一个初步的结论：渐进式概念指的是优先展示全局整体核心，再从核心上逐步拓展出想要的结果。

看完网页加载的这个例子之后，我们再来看看vue官方教程中的这段话。结合这一段时间的开发经验，我理解的vue中渐进式框架的理念，指的是先看到核心的部分（最小集），然后再在此基础上进行开发者自身的diy拓展（添加组件），这个过程随着开发者的需求逐步变化增长。从另一个角度来看也可以是，当你使用vue的时候，不需要一上来就使用vue的全家桶，而是可以根据场景适当选用方便的框架（官方提供）。形象地理解，渐进式框架就是搭积木，我们可以根据需求，利用社区良好的生态，从基础的底层开始，一步一步地，从下至上地，逐层递进地借助已有的工具和库搭建我们的项目。

说到这里，我们很容易可以总结到，所谓的渐进式框架就是框架分层。在vue中，最核心的是视图层渲染，然后往外是组件机制，再在此基础上加入路由机制（VueRouter），再加上状态控制（Vuex），然后最外层才是构建工具。这样做的好处是我们可以根据不同的需求来选择不同的层级，遵循最小最优最快的开发原则。

理解【为单页应用提供驱动】

因为vue可以只通过引用单个vue.js文件即可使用，可以很方便地与现有的类库或项目进行整合，轻松达到数据驱动页面（双向绑定）的效果，因此这句话的理解是：vue是一个轻量级的框架，简单引入即可使用。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

和其他第三方库（比如jQuery）一样，只需要通过script标签引入即可使用，这是vue.js最简单的一种安装方式。当然，vue还另外提供了其他安装方式，简直简直了。

vue的安装

Vue不支持IE8及以下版本，因为Vue使用了IE8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器。

官方教程文档里明确说明了vue是不支持ie8的，关于这一点在实际项目中也有所体会，和客户多次沟通之后客户才同意统一使用谷歌浏览器，因此浏览器兼容性这个因素一定要在选择前端框架的时候考虑进去，否则后期可能会造成不必要的麻烦。在这里，如果你的项目需要兼容ie8的话，vue就不应该在你的考虑范围之内了。

在浏览器上安装Vue Devtools

在使用Vue时，我们推荐在你的浏览器上安装Vue Devtools。它允许你在一个更友好的界面中审查和调试Vue应用。

官方推荐了这一款浏览器插件，同事有给我安装，但是在开发过程中个人用得不多，也不知道用处在哪，大概是我太笨了不会用吧（手动滑稽）。

使用<script>标签引入

使用script标签引入的话，vue就会被注册为一个全局变量，然后就可以通过这个全局变量来使用vue中提供的功能。

要引入的话可以直接从官网下载到本地后引入或直接通过cdn地址引用。其中，开发版本（官网下载）包含完整的警告和调试模式；而生产版本（官网下载）则是删除了警告，最小化了代码体积并经过了gzip压缩。因此这里要注意的是，在开发环境下不要使用压缩版本，不然就会失去了所有常见错误相关的警告。

对于制作原型或学习，开发者可以这样使用最新版本（cdn）：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

而对于生产环境，官方文档推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏（cdn）：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

此外，开发者还可以在cdn.jsdelivr.net/npm/vue浏览npm包的源代码。

请确认了解不同构建版本并在你发布的站点中使用生产环境版本，即把vue.js换成vue.min.js。因为这是一个更小的构建，可以带来比开发环境下更快的速度体验。

使用npm安装

在用Vue构建大型应用时推荐使用npm安装，因为npm能很好地和诸如webpack或browserify模块打包器配合使用。同时Vue也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue

对于npm的内容又是一个长时间的学习，如果是新手的话，这里只要知道就好了（俺也一样）。

使用命令行工具（cli）安装

vue提供了一个官方的cli，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了batteries-included的构建设置，只需要几分钟的时间就可以运行起来并带有热重载、保存时lint校验，以及生产环境可用的构建版本。

cli工具假定用户对node.js和相关构建工具有一定程度的了解，如果是新手的话，这里只要知道就好了（别问，问就是我不会，我太难了）。

不同构建版本的区别

官方文档这里说了一大堆专业术语，虽然有解释，但是没有一定的基础与了解还是看得一头雾水，因此这里只大概记一下构建版本可以分为三个版本：完整版、包含编译器的版本和运行时的版本。什么UMD、CommonJS和ES Module暂时放到一边去好了，什么CSP环境、Bower和AMD模块加载器也丢到厕所里去，以后再慢慢通过渐进式的学习来弄懂（等等，我真的是做后端的吗？？？）。

"我还是很喜欢你，像风走了八百里，不问归期。"