一直听说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模块