1.脚手架里面为什么main.js 里面,使用了render 函数/**
* 该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
// 引入App 组件 他是所有组件的父组件
import App from './App.vue'
//关闭vue 的生产提示
Vue.config.productionTip = false
// 创建Vue 实例对象--vm
new Vue({
// //将 app 组件放入到容器中
render: h => h(App),
}).$mount('#app')
2. 以前单文件为main.js 里面 写法
/**
* 该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
// 引入App 组件 他是所有组件的父组件
import App from './App.vue'
//关闭vue 的生产提示
Vue.config.productionTip = false
// 创建Vue 实例对象--vm
new Vue({
el:'#app',
template:`<App>你好呀</App>`,
comments:{App}
})
运行后会报错
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(残缺的 vue 没有获取到模板解析器) 并且模板解析器没有成功获取到.
解决方法使用 render 函数,,或者使用完整版的 vue。
那是因为在main.js 里面引入了。import Vue from 'vue' 引入第三方库,引入的都是残缺的vue。
/**
* 该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue/dist/vue' // 引入了完整的vue
// 引入App 组件 他是所有组件的父组件
//import App from './App.vue'
//关闭vue 的生产提示
Vue.config.productionTip = false
// 创建Vue 实例对象--vm
new Vue({
el:'#app',
template:`<h1>你好呀</h1>`,
//comments:{App}
})
可以显示运行,没有问题。
引入残缺版本的vue 怎么解决
/**
* 该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
// 引入App 组件 他是所有组件的父组件
//import App from './App.vue'
//关闭vue 的生产提示
Vue.config.productionTip = false
// 创建Vue 实例对象--vm
// new Vue({
// //将 app 组件放入到容器中
// render: h => h(App),
// }).$mount('#app')
new Vue({
el:'#app',
// 第一步
//render(createElement){
//console.log('vue调用render'+createElement);
//return createElement('h1','你是谁呀');
//}
// 第二步 render 里面没有this,,可以简写为箭头函数
// render:(createElement)=>{
// return createElement('h1','你是谁呀');
// }
// 第三步 箭头函数左边只有一个参数,可以把 ()省掉
//render:createElement=>{
//return createElement('h1','你是谁呀');
// }
// 第四步 箭头函数只有一个函数题,并且还想return
render:createElement=>return createElement('h1','你是谁呀'); 这样就和 render: h => h(App)差步多了。
//comments:{App}
})