vue.js与vue.runtime.js区别

1.两个版本分别叫什么

vue.js：完整版
vue.runtime.js:只包含运行时版

2.如何引入

• bootcdn引入：复制script标签粘贴到html中即可引入
• npm安装vue: $ npm install vue
• 使用命令行工具 (CLI)引入,默认引入非完整版，引入完整版需要配置
• 使用webpack引入vue默认引入非完整版，引入完整版需要配置

3.两个版本的区别

a.功能上的区别：

• 完整版：同时包含编译器和运行时的版本。
• 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
• 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

b. 体积上区别：

运行时版本没有编译器因此相比完整版体积要小大约 30%

c.使用上的区别

1.完整版可以直接从html文件中获取html元素
例如将html中的{{n}}变成1可以这么写：

<div id="app">
   {{ n }}
</div>

new Vue({
  el:"#app",
  data:{n:1}
})

2.完整版还可以直接从template中获取html元素
例如：将html中的{{n}}变成1可以这么写：

new Vue({
   el:"#app"
   data:{n:1}
   template:`
   <div>
   {{ n }}
   </div>
`
})

3.非完整版将html写在vue文件中通过vue-loader打包变成h函数再通过render渲染就可以渲染视图
例如在runtime版本下将页面中的n变成2
先在vue文件中写入下面代码

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

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

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

在main.js中引入上面的vue文件，运行$ yarn serve页面上就会出现一个数字2

import Vue from 'vue'
import Demo from "./demo.vue"
Vue.config.productionTip = false
new Vue({
  el:"#app",
  render(h){
   return h(Demo)
  }
})

4. template和render的区别

• 通过上面的两个例子我们可以知道template是在完整版vue中使用的，template后面是html标签,vue可以通过compiler解读这些标签。
• render是渲染函数，

new Vue({
render:(createElement){
   return createElement(Demo)
    },
})$mount("#app")

非完整版由于没有compiler不能从template或者html文件中获取html具体内容所以我们单独写个vue文件再让vue-loader 编译成render能看懂的代码，从而实现页面渲染。
render一般用于非完整版(完整版也可以用，template和render不能混用否则有一个会失效)作用是用来渲染vue文件打包后的内容。

5. 怎么用codesandbox.io 创建一个Vue项目

• google 搜索codesandbox.io
• 点击页面中</> Start coding for free
• 选择vue文件，点击就创建了一个简单的vue项目。