Vue完整版和不完整（runtime）版的区别

目录

• 完整版和运行版的名字区别

• tenplate和render的使用方法

• 使用codesandbox快速生成Vue项目

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

BootCDN官网

完整版

• 是同时包含编译器和运行时的版本，CDN引入所对应的文件名为vue.js或vue.min.js（生产环境）。

  

不完整版

• 是只包含运行时的版本，没有编译器，CDN引入所对应的文件名为vue.runtime.js或vue.runtime.min.js。

  

具体区别如下图👇

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

思路：

1. 保证用户体验，用户下载的js文件更小，加载更快，但只支持h函数
2. 保证开发体验，开发者可以直接在vue文件里写html标签，而不是写h函数
3. 脏活都让loader做，vue-loader把文件里的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.然后在app.vue里，直接把html代码写入template选项中

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

<script>

export default {
  name: 'App',
  data(){
    return {
      n:0
   }
  },
    methods:{
      add(){
        this.n += 1
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

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

• render

运行版，需要将HTML标签写入render中，让render来写入html中

例如：

1.在index.jhtml中添加一个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.然后在新建demo.vue里写HTML

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

<script>
    export default {
        data() {
            return {
                n: 0
            }
        },
        methods: {
            add() {
                this.n += 1
            }
        }
    };
</script>

<style scoped>
.red{
    color: red;
}
</style>

4.接着在main.js里导入demo，然后通过vue-loaderh把demo.vue文件里的html转为h函数写入render

import Vue from 'vue'
import demo from "./demo.vue"
new Vue({
    el: '#app',
    render: h => h(demo)
});

5.运行Vue后，达到完整版一样的效果

3.如何用 codesandbox.io 写 Vue 代码

codesandbox.io是一个在线编辑器，能够快速创建项目。

注意：不要登录，否则只能创建50个项目
点击中间按钮，创建项目。

选中vue开始编辑即可，或者下载全部文件，在本地使用