介绍一下 Vue 两个版本的区别和使用方法：

1.两个版本对应的文件名

image.png

主要区别：

完整版有compiler，编译器主要是将模板字符串编译成JS渲染字符串，导致完整版体积过大。
非完整版没有compiler，体积小，大约小30%-40%左右。视图写在render函数中，用h来创建标签。

引入区别：

bootcdn搜搜
完整版引入：vue.js，生产环境下引入vue.min.js
非完整版引入：vue.runtime.js生产环境下引入vue.runtime.min.js

视图
完整版：
视图写在html里或者template选项里，由于有compiler（编译器）的存在，完整版运行时，用来创建Vue实例，渲染并处理虚拟DOM等代码。
非完整版：

Vue({
  el: '#app',
  template: `<div>{{n}}</div>`,
  data(){
    return {
          n: 0
      }
   }
})

完整版运行时：当使用vue-loader 或vueify的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

Vue( {
  name: 'App',
  render(h){
    return h('<div',this.n)
  },
  data(){
    return {
      n: 0
    }
  }
})

其他：
webpack引入：Vue完整版需要配置alias,Vue非完整版默认使用
@vue/cli引入，完整版需要额外配置，默认使用非完整版。
总结：
总是使用非完整版，然后配合使用vue-loader和vue文件。
理由：

保证用户体验，用户下载的js体积更小，但只支持h函数
保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数
事情让loader做，vue-loader把vue文件里的HTML转换为h函数

2.template和render的使用方法

template
完整版可以直接在HTML里面或者在template选项中直接写代码。它会自动解析
例如：

1.在index.jhtml中添加一个id为app的标签

<div id="app"></div>

2.接着添加script标签，引入完整版的js文件

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>

3.然后在main.js里，直接把html代码写入template选项中

new Vue({
    el: '#app',
    template: `
       <div>{{n}}</div>
   `,
    data: {
        n: 0
    }
})

4.运行Vue后，它会直接把n为0写入到app标签中

render
运行版，需要将HTML标签写入render中，让render来写入html中
例如：
1.在index.html中添加一个id为app的标签

<div id="app"></div>

2.接着添加script标签，引入运行版的js文件

<script scr="https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js"><script>

3.然后在main.js里，用render函数来创建标签

new Vue({
    el: '#app',
    render(h){
        return h('div', this.n)
    },
    data: {
        n: 0
    }
})

4.运行vue后，效果和完整版一样

3.使用codesandbox快速生成Vue项目

codesandbox

搭建过程

1.不注册，点create sandbox
2.点vue创建

image.png
3.到处点file=>export to zip
image.png