vue安装
npm install vuevue引入
在 NPM 包的 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 | - | - |
说明：
- 完整版：同时包含编译器和运行时的版本。
- 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
- 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
- UMD：UMD 版本可以通过script标签直接用在浏览器中。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/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)。
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>