目录
二、不同构建版本 1、运行时+编译器vs.运行时 2、开发环境vs.生产环境模式
一、单文件组件
通常使用Vue.component定义全局组件，在页面中用标签引入。这种方式在很多中小规模的项目中运作的很好，在这些项目里JavaScript只被用来加强特定的视图。但在更复杂的项目中，或前端完全由JavaScript驱动的时候，缺点变得非常明显：全局定义强制要求每个组件名不得重复；字符串模板缺乏语法高亮；不支持CSS，只有HTML和JavaScript在组件中；没有构建步骤，限制只能使用HTML和ES5，而不能使用预处理器，如Pug和Babel。
文件扩展名为.vue的single-file components(单文件组件)实现了完整语法高亮、CommonJS模块、组件作用域的CSS，还可以使用预处理器来构建简洁和功能更丰富的组件。
scoped作用域仅在该组件及其子组件（如果是可继承样式）生效，未设置时默认是全局。scoped通过CSS的属性选择器实现。lang="scss"设置编写样式的语言，默认只支持普通样式，可设置为less、postcss、sass、scss、stylus。
<template> <!-- 唯一根元素 -->
<div>
<p>{{greeting}} World!</p>
other-component
</div>
</template>
<script>
import OtherComponent from './OtherComponent.vue'
module.exports={ // 导出一个对象
data:function(){
return {
greeting:'Hello'
}
},
components:{
OtherComponent
}
}
</script>
<style scoped lang="scss">
div{
p{
color:red;
}
}
</style>
二、不同构建版本
在node_modules\vue\dist目录会找到很多不同的Vue.js构建版本。
|
|
UMD |
CommonJS |
ES Module |
|
完整版 |
vue.js |
vue.common.js |
vue.esm.js |
|
只包含运行时版 |
vue.runtime.js |
vue.runtime.common.js |
vue.runtime.esm.js |
|
完整版（生产环境） |
vue.min.js |
- |
- |
|
只包含运行时版（生产环境） |
vue.runtime.min.js |
- |
- |
运行时：用来创建Vue实例、渲染并处理虚拟DOM等的代码。基本是除去编译器的其它一切。
编译器：用来将模板字符串编译成为JavaScript渲染函数的代码。
完整版：同时包含编译器和运行时的版本。
UMD：可通过<script>直接用在浏览器中。jsDelivr CDN默认文件就是运行时+编译器的UMD版本vue.js。
CommonJS：用来配合老的打包工具，如Browserify或webpack 1。这些打包工具的默认文件（pkg.main）是只包含运行时的 CommonJS版本vue.runtime.common.js。
ES module：版本用来配合现代打包工具，如webpack 2或Rollup。这些打包工具的默认文件（pkg.module）是只包含运行时的 ES Module版本vue.runtime.esm.js。
1、运行时+编译器vs.运行时
如果你需要在客户端编译模板（如传入一个字符串给template选项，或挂载到一个元素上并以其DOM内部的HTML作为模板），就需要加上编译器，即完整版。
// 需要编译器
new Vue({
template:'<div>{{ hi }}</div>'
})
// 不需要编译器
new Vue({
render(h){
return h('div',this.hi)
}
})
当使用JavaScript内的字符串模板或DOM内的html模板时，模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了，但对性能敏感的应用还是最好避免这种用法。使用单文件组件相关的构建设置会自动把模板预编译处理好，使构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。
当使用vue-loader或vueify的时候，*.vue文件内部的模板会在构建时预编译成JavaScript，最终打好的包里不需要编译器，所以只用运行时版本即可。因为运行时版本相比完整版体积要小大约30%，所以应该尽可能使用这个版本。
2、开发环境vs.生产环境模式
UMD版本：开发环境用未压缩的代码，生产环境用压缩后的代码。
CommonJS和ES Module版本是用于打包工具的，因此我们不提供压缩后的版本，需要自行将最终的包进行压缩。二者同时保留原始的process.env.NODE_ENV检测，使用适当的打包工具配置来替换这些环境变量以便控制Vue所运行的模式。把process.env.NODE_ENV替换为字符串字面量同时可以让UglifyJS之类的压缩工具完全丢掉仅供开发环境的代码块，以减少最终的文件尺寸。
三、webpack
见文章webpack、Vue