Vue入门之两个版本的选择

使用codesandbox

如果你不想每次在本地练习时都要创建一个vue项目并选择配置的话（即使是使用之前预制的模板），那么一个网页版的开发工具（codesandbox）非常推荐使用,它可以快速开启你的项目而免去配置项目文件。

它除了有Vue的模板外，还有React、Angular等大量的其他模板，感兴趣的可以自行前往使用，这里只简单介绍如何创建和使用Vue项目。

如图的顺序步骤即可快速创建一个Vue模板，生成的项目是这个样子的。

codesandbox的编辑器使用的是vscode的编辑器，如果你对vscode比较熟悉的话可以几乎无过渡就可以使用了。一些比较特殊的点已在图中标明，首先要注意的是不要登录（官网也说了不是必须要登录才能使用），除非你要自己创建模板，而且登录后创建项目会有个数限制，所以还是不要登录直接使用吧。其次是如果这个项目想保存下来，那么可以点击Files红框内的下载按钮把这个项目下载到本地使用（顶部的菜单栏file处也可以下载）。

另一个不得不说的就是另一个红框处（dependencies里），我们可以直接选择自己需要的vue版本，这比自己下载更换版本方便许多。

完整版和非完整版

vue官网说明，vue有不同的构建版本，被分别称为完整版和非完整版。完整和非完整的区别只在于是否包含了编译器，非完整版的体积会相对小很多。一般默认是非完整版，我们通过@vue/cli创建的项目也是非完整版。尝试注释掉render方法：（由于codesandbox自身原因在注释掉render后会自动使用到完整版，所以想看到此信息请在本地项目测试）

new Vue({
  // render: h => h(App),
}).$mount('#app')

可以在浏览器控制台中看到vue提示的警告信息：

这个警告信息告诉我们当前使用的是运行时版本（非完整版）要么使用有编译器的版本来构建，要么使用render方法实现页面渲染。

关于两个版本更具体的信息：

总结：总是使用非完整版，然后配合vue-loader和vue单文件组件。好处是：

• 保证用户体验，用户下载的js文件体积更小，但只支持render函数参数h去渲染；
• 保证开发体验，开发者可以直接在vue文件里写HTML标签，而不用自己写h函数（h等同于createElement）
• 脏话让loader去做，vue-loader把vue文件里的html转为h函数。

template 和 render

template：template是vue创建实例时传入对象的一个选项，template内容是在完整版下可被编译器编译渲染的，但里面的内容会覆盖掉挂载节点，如果节点内原本有内容，那么将会被清空和替换。所以如果是使用完整版vue，要么在public/index.html里写内容，要么就使用template选项，二者选其一。

render：render是在非完整版下实现渲染的方法，它是将已经被编译器编译好的对象渲染对视图上。它可以渲染经过import导入并经过vue-loader处理的组件，也可以直接写一些待渲染对象：

render(h) {
    return h('div',[this.n,h('button',{on:{click:this.add}},'+1')])
},