main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
    router,
    el:'#app',
    components:{App},
    template:`<App></App>`,
});

• 报错如下

vue.runtime.esm.js?2b0e:619 [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，import Vue from 'vue',引入是残缺的，每一模板解析器，不能解析template

---

完整版引入如下：import Vue from 'vue/dist/vue'

import Vue from 'vue/dist/vue'//这是完整引入
import App from './App.vue'

new Vue({
    // router,
    el:'#app',
    components:{App},
    template:`<App></App>`,
});

• 引入残缺版：import Vue from 'vue'

// import Vue from 'vue/dist/vue'
import Vue from 'vue'//引入残缺版

new Vue({
    el:'#app',
    render(createElement){
        console.log(typeof createElement)//打印出来是个函数，默认传入的
        return null//必须要有返回值
    }
});

• 渲染template要用render，传入的形参是函数，用这个函数可以添加或渲染HTML元素，如下：

// import Vue from 'vue/dist/vue'
import Vue from 'vue'

new Vue({
    el:'#app',
    // components:{App},
    // template:`<App></App>`,
    render(createElement){
        // console.log(typeof createElement)
        return createElement('h1','你好啊~')//要返回元素标签h1，这就会被渲染了
    }
});

h1被添加渲染.PNG

• 这样，我们可以利用render这函数，渲染我们的模板App，因为App是我们已经写好的模板，里面有HTML结构了

// import Vue from 'vue/dist/vue'
import Vue from 'vue'
import App from './App.vue'
// import router from './router'

new Vue({
    // router,
    el:'#app',
    // components:{App},
    // template:`<App></App>`,
    // render: h => h(App),
    render(createElement){
        // console.log(typeof createElement)
        // return createElement('h1','你好啊~')
        return createElement(App)
    }
});

• 完整如上图：简写模式如下：

// import Vue from 'vue/dist/vue'
import Vue from 'vue'
import App from './App.vue'
// import router from './router'

new Vue({
    // router,
    el:'#app',
    // components:{App},
    // template:`<App></App>`,
 
    // render(createElement){
    //     // console.log(typeof createElement)
    //     // return createElement('h1','你好啊~')
    //     return createElement(App)
    // }
// h是形参，返回值的h(App)，h是这个的createElemen函数
    render: h => h(App)
});

• 简写版是为了让项目更加简洁，因为项目上线的时候，已经被编译成适合浏览器的html，css，js文件，不需要模板解析器了，完整的vue是包含模板解析器和vue核心js代码的