前言：假设你用 vue-cli 创建了一个 vue 项目，如下
index.html 中
<div id="app">
<h1>{{text}}</h1>
</div>
main.js 中
import Vue from 'vue'
new Vue({
el: "#app",
data: {
text: "hello"
}
})
当 npm run serve 启动项目打开页面后，你会发现报错了
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
这是因为你使用的是 vue 的 runtime-only 版本，它不支持这样写，使用 vue-cli 创建的项目，默认配置的就是 vue.runtime.js 版本
一、Vue 不同的构建版本
1. 完整版
同时包含编译器(用来将模板字符串编译成 js 渲染函数的代码)和运行时的版本
- vue.js
- vue.min.js(生产环境)
2. 只包含运行时版(非完整版)
用来创建 Vue 实例，渲染并处理虚拟 DOM 等的代码，基本上就是除去编译器的其他一切
- vue.runtime.js
- vue.runtime.min.js(生产环境)
二、所以，解决最开始的问题有3种办法
1. 引入完整版
<div id="app">
<h1>{{text}}</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
text: "hello"
}
});
</script>
弊端：完整版相较于非完整版体积较大
2. 使用 render 函数来生成 VNode
new Vue({
el: '#app',
render(h){
return h('div', this.text)
},
data: {
text: "hello"
}
});
render 函数的参数是 createElement 函数，它会返回一个 VNode ，它的简写是 h，将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例
弊端：必须使用 render 函数并传入 h 参数构造出所有的元素
3. 单文件组件
使用 webpack 的 vue-loader（vue-cli 已经帮我们配置好了这个加载器）
App.vue文件如下：
<template>
<div id="#app">
<h1>{{text}}</h1>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
text: "hello"
}
}
}
</script>
因为 Vue 是虚拟 DOM ，所以单文件 App.vue 经过 vue-loader 处理，由 vue-template-compiler 将 template 模板编译生成 render 函数
优点：是非完整版，体积小，并且不需要写 render 函数
总结
以上我们对 vue 不同的构建版本有了一个了解，也对使用 Vue 实例有了一些概念，
最完美的方法就是使用单文件组件，使用 vue-cli 创建的项目就是只包含运行时版(非完整版)，所以，直接使用单文件组件是最方便快捷的
网友评论