vue官网学习（一）

一直听说vue.js的学习一定要通过官网来学习，个人虽然接触过vue项目，对于官网还是比较陌生，所以今天开始对官网进行一个初步的学习，后期准备看完之后，整理出来一个比较清晰的目录出来，供大家学习，希望大家持续关注我的博客，谢谢！！！（如果有不对的地方，希望大家能够指正）

一：安装

1. vue.js兼容所有es5的浏览器，但是ie8不行，所以不兼容ie8以下

2. 需要我们安装vue的调试工具：vue Detvtools.这个的安装也很简单

3. 下载下来的vue.js我们可以直接用script标签引入，主要我们在开发的时候，最好用开发版本，因为可以提示错误

4. 建议我们vue,js记得使用npm安装，npm一些好处，可以跟模块打包器进行配合使用（webpack，browserify等等）

5. 命令行工具：（可以快速创建和启动带热重载，保存时静态检查以及可用于生产环节的构建配置的项目：注意这里面的几个词：热重载，静态检查，构建配置，这个大家在做项目的时候，要着重去理解这几个词语）

6. 在npm里面的dist文件下面会有很多vue.js相关文件，他们之间是有区别的

分为四类：

（1）完整版：                                

vue.js (UMD)

vue.common.js(CommonJS )  

vue.esm.js( ES Module)

（2）只包含运行时：                     

vue.runtime.js(UMD)
vue.runtime.common.js(CommonJS )

vue.runtime.esm.js( ES Module)

（3）完整版（生产环境）：           

vue.min.js (UMD)

（4）只包含运行时（生产环节）：

vue.runtime.min.js (UMD)

看一下这里的UMD，一种新的规范出来的（大家还是需要了解一下UMD,AMD,CMD等等，自己去了解学习）

官网里面还解释这些术语，接下来我会跟大家通俗的说出来，方便大家理解：

一.完整版：同时包含编译器和运行时的构建。

（1）编译器：用来将模板字符串编译成为JavaScript渲染函数的代码。（模板字符串，是es6里面的最新的一种语法，跟普通的字符串没有区别，只是里面可以写表达式的部分，所以这里存在编译的过程，相关链接：http://www.infoq.com/cn/articles/es6-in-depth-template-string）

（2）运行时：用来创建vue实例，渲染并处理虚拟dom等行为的代码，基本上除去编译器的其他的一起东西（虚拟dom：这里需要理解vue的渲染html原理）

（3）UMD：umd构建可以直接通过<script>标签用着浏览器中，jsDelivr CDN的https://cdn.jsdelivr.net/npm/vue 默认文件就是运行时+编译器的UMD构建（UMD构建：是AMD和common,js的合并，还是一个比较不错的模块化规则，这句话的意思就是vue.js文件就是实现UMD构建文件）

（4）common.js：用来配合老的打包工具（browserify，webpack1），这些打包工具的默认文件（pkg.min）是包含运行时的commonJS构建（同样的是，这个pkg文件就是实现commonjs的构建）

（5）ES Module：ES module构建用来配合现代打包工具（ webpack2 或者 rollup），这些打包工具的默认文件（pkg.module）是只包含运行时的ES Module构建（es构建：其实就是import以及export的命令的进行模块化引入，相关链接：https://www.jianshu.com/p/ba6a24dc6b23）

以上的概念，如果想要深入理解的话，还需要对AMD CMD  COMMON.JS UMD ES Module 进行理解，后期我会补偿这部分的概念理解

二：运行时+编译器  VS  只包含运行时

其实这个不就是比较编译器的区别吗？

官网给出一个例子：什么情况下需要编译器：譬如传入有一个字符串给template选项，或者挂载到一个元素上并以内部的html作为模板，这个时候需要编译器，不然这些在js写的字符串是无法到html里面的，是完整版的构建：

给出的两个例子，一个看明白了，第二个没有看明白（应该是某一个语法的东西）

那么怎么把这些vue里面的写法编译到html里面去尼，这时候就用到了vue-loader或者vueify，原理是：*.vue文件的内部的模块会在构建时编译成 js，所以每次在运行时构建好了就行，在最终打好的包实际上是不需要编译器的，因为运行时已经进行编译过了，正在打包的东西是html文件

三：开发环境  VS 生产环境（这部分没看太明白）

开发环境以及生产环境是硬编码的UMD构建：开发环境下不压缩代码，生产环境压缩代码

commonJS和ES Module 构建同时保留原始的process.evn.NODE_ENV检测，以决定应该运行在什么模式下，

process.evn.NODE_ENV其实就是设置vue的环境的，是生产，开发，还是测试

这段话很好的解释了env的作用了，，因此可以使用适当的打包工具配置来体积这些环境变量来控制vue所运行的模式，（同时吧env 替换成字符串字面量同时可以让uglifyJS之类的压缩工具完全丢掉仅供开发环境的代码块，以减少最终的文件尺寸）

四：csp环境

csp概念：将 C语句直接嵌入到 HTML 源文件中并叫它 CSP；这个解释其实还是挺理解的

这段话我觉得比较重要的是：运行时版本是完全兼容csp的，当通过webpack+vue-loader或者browserify+vueify构建，模板被编译成render函数，可以在csp环境下完美的运行；(render函数: rander函数是将复杂的html模板的部分，转移到js中实现 )

五：开发版本

重要：gitHub仓库的/dist文件夹只有在新版本发布时才会提交，如果想要使用gitHub上的vue的最新的源码，你是需要自己构建！

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

六：Bower

Bower 概念：Bower是Web开发中的一个前端文件包管理器。类似于Node模块的npm包管理器，它允许开发者为服务器编写可共享的模块。Bower为Web组件提供了类似的功能。它凭借一个通用的、中性且易用的接口为依赖问题提供了一个解决方案。它是基于Git运行的，并且包是未知的。它还支持其他传送类型，比如requireJS、AMD，等等。相关链接：http://blog.csdn.net/qq_23560921/article/details/51133979

Bower 只提供UMD版本；

七：AMD模块加载器

所有的UMD 版本都可以直接用作AMD模块