VUE完整版和运行版的区别及使用方法

两个版本对应的文件名

大致分为2个版本分别是完整版和运行时版又根据是否在生产环境运行分为，vue.js,vue.min.js,vue.runtime.js,vue.runtime.min.js

	Vue完整版	Vue非完整版	评价
特点	有compiler（编译器）	没有compiler（编译器）	compiler(编译器)占40%体积
视图	写在HTML里或者写在template选项（模板选项）	写在render函数里用h来创建标签	h是尤雨溪写好传给render的
cdn引入	vue.js	vue.runtime.js	文件名不同，生成环境后缀为.min.js
webpack引入	需要配置alias（别名）	默认使用此版	尤雨溪配置的
@vue/cli引入	需要额外配置	默认使用此版	尤雨溪、蒋豪群配置的

最佳实践:总是使用非完整版，然后配合vue-loader和vue文件思路:

1.保证用户体验，用户下载的JS文件体积更小，但只支持h函数
2.保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数
3. 脏话让loader做，vue-loader把vue文件里的HTML转为h函数真TM聪明，这就是工程师干的事

 

vue.is错用成了vue.runtime. js
无法将HTML编译成视图
vue.runtime.js错用成vue.js
代码体积变大，因为vue.
js有编译HTML的功能

　　

template 和 render 怎么用

默认在vue的项目文件中找main.js中写入

// 运行时版本需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 完整版自带编译器不需要环境另装编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

　　

教读者如何用 codesandbox.io 写 Vue 代码

1. 进入https://codesandbox.io/

2. 创建Vue项目

3. 

    

    最左边的是文件目录，中间是编译区，右边是展示区

4. 

    

    编译结束后想存储到本地，可以使用左上角file单击，然后export to zip下载zip到开发端。