计算机 网站开发 文章,app手机应用软件开发,客户管理软件哪个好用,大型网站开发用什么样式按照之前的单组件文件中的写法#xff0c;我们的写法应该是这样的
import App from ./App.vuenew Vue({el: #app,templete: App/App,components: {App},
})
1、定义el根节点。2、注册App组件。3、渲染 templete 模板
但是在脚手架工程中#xff0c;他是这…按照之前的单组件文件中的写法我们的写法应该是这样的
import App from ./App.vuenew Vue({el: #app,templete: App/App,components: {App},
})
1、定义el根节点。2、注册App组件。3、渲染 templete 模板
但是在脚手架工程中他是这样的
import Vue from vue
import App from ./App.vueVue.config.productionTip falsenew Vue({render: h h(App),
}).$mount(#app)
其他的都没啥问题之前的文章中都有讲过但是这个render函数是用来干啥的
为了解析这个 render 我们一步一步来如果说我们在脚手架中使用之前的单组件文件中的写法
import Vue from vue
import App from ./App.vuenew Vue({el: #app,templete: App/App,components: {App},
})
这么一看应该是没啥问题的对吧毕竟要素都有了那我们运行工程试试看。
哦豁页面一片空白控制台报错了 这个报错翻译过来就是您正在使用Vue的仅运行时构建其中模板编译器不可用。要么将模板预编译为呈现函数要么使用包含编译器的构建。
说成大白话就是我们现在使用的 Vue 是阉割版的不包含模板编译器这是因为 vue-cli 在搭建项目的时候用的就是不带编译模板的Vue.js。后面也给了解决方案要么使用完整版的带解析器的Vue要么使用 render 函数来编译模板
那如果简单解释一下就是 render 这个函数的作用就是 用来编译模板的。 render的作用 我们现在 main.js 中看看 引入的Vue到底是个啥文件。在报错信息后面有个文件名称发现是
vue.runtime.esm.js 文件代表的就是仅运行时的Vue文件 如果想验证一下的话找到这个文件在最前面 加一个 console.log 然后重启项目在页面上看看效果 说明确实是使用的这个Vue文件至于报错啥的就暂时先别管后面再说。
我们按照上面的解决办法一个个试试。
1、引入一个完整版的Vue.js 。
在同一个目录下找到 Vue.js 这个就是最完整的 Vue包含了Vue 的所有功能。将main.js中的Vue文件替换
import Vue from vue/dist/vue.js;
重启项目看看效果 发现在更换完整版的 Vue.js 之后报错不存在了这就验证了第一个解决办法
2、使用 render 函数来解析模板
main.js 中的 render 是一个函数而且写的很精简完全看不懂我们把它仔细分析一下看看
new Vue({render() {console.log(render);return null},
}).$mount(#app);
首先我们看这个函数调用没有调用了就 console 一下。此时你会发现render 函数报错了页面上也报错了这是因为 render 函数需要有一个返回值。我们加上一个 return null 就会发现 页面展示正常
然后在初始的 render 函数中 是存在一个参数的简写的是 h但是在文档中写的是 createElement 顾名思义也能够大概理解这个参数的作用是个啥。但是我们还是看看这个参数到底是个啥 createElement 是一个函数且这个函数存在四个参数这个函数同样返回了 一个 函数我们暂时就不纠结 返回的 createElement$1 函数 是个啥了可以去看看官方文档 createElement-参数 我们通过render函数来渲染一个h1标签标签内容是你好
new Vue({render(createElement) {return createElement(h1,你好);},
}).$mount(#app); 那如果我们直接渲染App组件会是什么情况呢
new Vue({render(createElement) {return createElement(App);},
}).$mount(#app); 既然可以渲染成功那么我们把render函数精简一下写成箭头函数参数用任意字母代替那是不是就和初始的render函数基本一致了
至于为啥 脚手架会引入一个 运行时的 Vue 而不是 使用一个完整版的Vue这是因为当我们开发完毕之后通过webpack打包之后生成的都是可以直接让浏览器识别的 html、js、css文件不需要 模板编译器这玩意在打包的时候也可以节省一点 Vue 包的体积。 总结 Vue.js 与 Vue.runtime.esm.js 的区别 (1)、Vue.js 是完整版包括 Vue核心功能 Vue 模板编译器 (2)、Vue.runtime.esm.js 是仅运行时版本只包括 Vue 核心功能不包括 Vue 模板编译器
因为 Vue.runtime.esm.js 不包含模板编译器所以在main.js 的 new Vue 中不能使用 templete 配置项只能使用 render 函数 接收到的 createElement 函数 来指定需要编译的具体内容
