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代码的
