两个版本对应的文件名

大致分为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到开发端。

版权声明：本文为timeObserver原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/timeObserver/p/14399187.html