vue自定义组件无法渲染问题（runtime-compiler和runtime-only）

问题描述：页面内自定义组件无法渲染问题

代码如下

export default {
    components: {
         'MyHeader': {
            template: `<div>
                        <h1>hello</h1>
                        <h2>world</h2>
                        <div>{
   
   {title}}</div>
                    </div>`,
            data() {
                return {
                    title: '报表报表不不不不不'
                }
            },
        },
    },
    data() {
        return {}
    }
}

解决方法：

vuecli 2.0版本写法
/* 带webpack显性配置的 */  
//webpack.config.js
//其实就是取别名，找到以 vue 结尾的，就去node_modules重新查一下路径
module.exports = {
  resolve: {
   alias: {
    'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
  }
 }
}



vuecli 3.0版本写法
/* webpack隐性配置的 */
//vue.config.js
//true 就是完整版的（即runtime-compiler）
module.exports = {
  runtimeCompiler: true  //ture: runtime-compiler  false: runtime-only
}

问题原因：runtime-compiler 和 runtime-only

在项目配置的时候，使用npm 包默认导出的是运行时构建，即 runtime-only 版本，不支持编译 template 模板。 vue在初始化项目配置的时候，有两个运行时版本：runtime-compiler版本、runtime-only版本。
runtime-compiler 版本：可以对 template 模板内容进行编译。
runtime-only 版本：使用 vue-loader 加载.vue 文件时，webpack 在打包过程中对模板进行了渲染。加载更快。

扩展知识点：

1. Vue的编译渲染过程

template --> ast --> render函数 --> VDom --> 真实DOM

先将template解析(parse)成抽象语法树(ast)
将ast编译(compiler)成render函数
将render函数渲染(render)成虚拟DOM
最后将虚拟DOM渲染成真实DOM

(1) runtime-compiler的步骤
template --> ast --> render函数 --> VDom --> 真实DOM

(2) runtime-only的步骤
render函数 --> VDom --> 真实DOM

2. 两者的对比

(1) 首先从代码的完整性来看，runtime-only版本比runtime-compiler版本少了一个API -- Vue.compile，这个API是执行前两步，将一个模板字符串编译成 render 函数。因此，runtime-only是无法使用template选项的。

(2) 由于runtime-only少了相应的功能，使得该版本的体积更小。

3. 两者如何选用

(1) 两者各有各的好处，runtime-compiler包含编译器，可以选用template或render，选择更灵活；但是体积略大，性能略差；
(2) runtime-only不包含编译器，在渲染页面时能节省两步操作，性能略好；但只能选择render进行编写，灵活度不够。那如何选择呢？

使用runtime-compiler的情况

(1) 在html中使用vue库，在这种操作下，你可能只是为了使用vue的一些功能，如指令、数据绑定等，此时你写template模板要比写一个render函数更容易且易理解，此时建议使用runtime-compiler

(2) 如果 render 函数和 template property 都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。

使用runtime-only的情况

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