Vue 版本
完整版:同时包含编译器和运行时的构建。
编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。
运行时:用来创建 Vue 实例,渲染并处理 virtual DOM 等行为的代码。基本上就是除去编译器的其他一切。
UMD:UMD 构建可以直接通过 <script>
标签用在浏览器中。Unpkg CDN 的 https://unpkg.com/vue 默认文件就是运行时 + 编译器的 UMD 构建 (vue.js
)。CommonJS:CommonJS 构建用来配合老的打包工具比如 browserify 或 webpack 1。这些打包工具的默认文件 (pkg.main
) 是只包含运行时的 CommonJS 构建 (vue.runtime.common.js
)。ES Module:ES module 构建用来配合现代打包工具比如 webpack 2 或 rollup。这些打包工具的默认文件 (pkg.module
) 是只包含运行时的 ES Module 构建 (vue.runtime.esm.js
)。
Vue安装
直接<script>中引入
- 下载使用UMD,直接通过 <script>标签用在浏览器中
- 使用CDN 的 https://unpkg.com/vue 默认文件就是运行时 + 编译器的 UMD 构建 (vue.js)。
NPM
在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。
# 最新稳定版
$ npm install vue
vue-cli
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
使用vue-cli时,当使用 vue-loader 或 vueify 的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,因为只是用运行时构建即可。
如果你需要线上编译模板 (比如传入一个字符串的 template 选项,或挂载到一个元素上并以其内部的 HTML 作为模板),你将需要加上编译器,即使用完整版的构建:
// 需要编译器
new Vue({
template: '<div>{{ hi }}</div>'
})
// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})
你需要在你的打包工具里配置