1.Vue完整版
特点：
- 有compiler编译器，占40%体积
- 视图写在HTML或template选项中
new Vue({
template: '<div>{{ hi }}</div>'
})
- 文件名为vue.js,生产环境为vue.min.js
2.Vue非完整版
特点：
- 无compiler编译器，体积小，用户体验好
- 视图写在render函数里，用h来创建标签
new Vue({
render (h) {
return h('div', this.hi)
}
})
- 开发者可直接在vue文件里写HTML标签，vue-loader会将HTML转为h函数
import Demo from './Demo.vue'
render(h){
return h(Demo)
}
- 文件名为vue.runtime.js,生产环境为vue.runtime.min.js
3.安装
- cdn引入
//生产环境下
<script src='https://cdn.bootcss.com/vue/2.6.11/vue.min.js'> </script>//完整版
<script src='https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js'> </script>//非完整版
- webpack引入
完整版需配置 alias,非完整版为默认配置 - @vue/cli 引入 完整版需额外配置,非完整版为默认配置
-> yarn global add @vue/cli //yarn全局安装
-> npm install -g @vue/cli //npm全局安装
-> vue create 路径 //创建目录,路径可以用.
-> 选择配置
-> 进入目录，运行yarn serve或者npm run serve，开启webpack-dev-server
4.最佳实践
配合vue-loader和vue文件使用非完整版
5.使用codesandbox.io 写 Vue 代码
- create sandbox
- 选择Vue
- 创建Vue后会自动生成所需文件
