1. Vue 分为“完整版”，“非完整版”两个版本

• Vue 完整版文件名后缀是 vue.js（生产环境为 vue.min.js） 此版本 有 compiler 编译器，视图直接写在 HTML 里或 template 选项 ，可以将含有占位符 {{}} 或条件语句变成真实的 DOM 节点，但是代码体积要比非完整版大40%左右，影响用户体验。

• Vue 非完整版文件名后缀是 vue.runtime.js（生产环境为 vue.runtime.min.js） 此版本 没有 compiler 编译器，不能将 HTML 变成节点， 而是可以由 webpack 通过 vue-loader（yarn build 里已配置好）和 vue 文件将 HTML 变成 h('div', this.n)

注意： webpack 引入：默认使用非完整版，Vue 完整版需要配置 alias。
            @vue/cli 引入：默认使用非完整版，Vue 完整版需要额外配置。

总结：

最佳选择：总是使用非完整版，然后配合 vue-loader 和 vue 文件

原因：

1. 保证用户体验，用户想下载的 JS 文件体积更小，但只支持 h 函数
2. 保证开发体验，开发者可直接在 vue 文件里写 HTML 标签，而不用写 h 函数
3. 脏活让 loader 做， vue-loader 把 vue 文件里的 HTML 转为 h 函数

2. template 和 render 怎么使用

Vue 的完整版用 template ，直接写在 HTML 里或者 JS 上：

<template>
    <div id="app">
        {{n}}
        <button @click="add"> +1 </button>
    </div>
</template>

Vue 非完整版用 render， render 函数接收一个参数 h ，h 是尤雨溪（前端框架 Vue.js 的作者）在 Vue 中写好传给 render 的，可以用这个参数去创建实例：

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

3. 使用 codesandbox.io 写 Vue 代码

进入 codesandbox.io/

1. 首先 Create Sandbox （不要sign in）

2. 选择 Vue

3. 创建后自动生成，完成