vue分为两个版本：

1.完整版，即可以直接从HTML获得视图。

使用方法：

可以从CDN或npm引用vue.js或者vue.min.js即可，也可以import引用vue.js或者vue.min.js。

vue.js通过编译器compiler把视图上的HTML转化为DOM节点、HTML内容。

完整版的视图是写在HTML里面或者template选项里，由于有 compiler(编译器)的存在，所以会占用较多用户内存。

代码示例：

new window.Vue({
    el: "#app",
    template: `
    <div @click="add">
      {{n}}
      <button> +1 </button>
    </div>
  `,
    data: {
        n: 0,
    },
    methods: {
        add() {
            this.n += 1;
        },
    },
});

2.runtime版本，即不支持从html获取视图。

使用vue-cli创建的目录默认会使用这个。.vue 文件内部的模板会在构建时预编译成 JavaScript。在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

使用方法：

使用vue.runtime.js,查看文档信息，需要在 render(){}内编写代码，并用h（createElemennt）创建标签，虽然不方便，但是这种比较好。

vue.runtime.js 非完整版中的html只是字符串，且不能从html中获取视图。

代码示例：

new window.Vue({
  el: "#app",
  render(h){// vue 会给 render 传一个参数这个参数是一个可以创建html的函数
    return h("div", [this.n, h("button", {on:{click: this.add}}, "+1")])
  },
  data: {
    n: 0
  },
  methods:{
    add(){
      this.n += 1
    }
  }
})

使用vue-loader

但是这种使用 render 函数的方式显得很麻烦,可以结合webpack，通过webpack内的vue-loader,将其转成h()函数，这样用户下载的js文件体积变小了。

这样就可以直接写成.vue文件，直接在vue内写网页代码。

vue的三个标签：template、script、style，分别写视图、其他、样式。

//  demo.vue
<template>
  <div class="red">
    {{ n }}}
    <button @click="add">+1</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      n:0
    }
  },
  methods:{
    add(){
      this.n++
    }
  }
}
</script>
<style scoped>
  .red{
    color: red;
  }
</style>

vue-loader 会把这个demo.vue文件变成一个对象 使用render函数渲染这个对象即可。

new Vue({ 
  el:'#app',
  render(h) {     
    return  h(demo)
  },
})

可以把.vue文件翻译成h构建方法，这样做HTML就只有一个div#app，但是SEO不友好。

什么是SEO?

SEO就是搜索引擎优化。搜索引擎可以理解为不停地curl，搜索引擎根据curl猜测页面内容。如果你的页面是js创建div的，那么curl就什么也没有。

如何解决？

很简单，给curl一点内容就好了，把title、description、keyword、h1、a写好即可。例如在图中的id为app的div内填写内容，js会覆盖内容，不影响页面，而SEO也十分友好了。原则就是让curl获取页面信息。

总结：完整版 VS runtime版

1. 特点：vue完整版有compiler（编译器）而runtime版本没有，而且compiler占40%的体积。

2. 视图：vue完整版写在HTML里或者template选项里，而runtime版本写在render函数里，并用h（createElement）来创建标签。

   *h是尤雨溪写好传给render的

3. cdn引入：vue完整版用vue.js引入。而runtime版本用vue.runtime.js引入。

4. webpack引入：vue完整版需要配置alias，而runtime版本则是被默认使用的。

5. @vue/cli引入：vue完整版需要额外配置，而runtime版本则是被默认使用的。

最佳实践：总是使用非完整版，配合vue-loader和vue文件。

思路：

1.保证用户体验，用户下载的JS文件体积更小，但是只支持h函数。

2.保证开发体验，开发者可以直接在vue文件里写html标签而不写h函数。

3.杂事让loader做，vue-loader把vue文件里的HTML转为h函数。

利用codesandbox快速搭建Vue

1. 点击：进入官网

2. 选择Create Sandbox

3. 选择Vue

4. 可以在左上角 -> file -> Export to ZIP导出