vue 脚手架 main.js中的render函数

最新推荐文章于 2025-09-15 16:26:20 发布
原创 最新推荐文章于 2025-09-15 16:26:20 发布 · 1.6k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文详细介绍了在Vue.js项目中，由于引用了残缺版的vue.runtime.esm.js导致模板解析器缺失的问题。通过分析package.json和dist文件夹，发现vue.js是完整版Vue，而vue.runtime.*.js缺少模板解析器。为解决此问题，文章提供了两种方法：一是直接引入完整版Vue；二是使用render函数。通过render函数，可以避免模板解析错误，并且减少了打包后的文件大小。此外，文章还探讨了Vue团队创建多个版本Vue的原因，主要是为了优化打包体积。

 要点：

 对于这个render函数一般只会在main.js中使用,在一些组件中都不会去使用,因为组件中写得都是template标签,vue专门设置一个库去解析它

 曾经我们写main.js是这样写的 

那我们先把之前的写法写入脚手架的main.js

但运行发现报错

报错：你真正运行一个运行时版本的vue没有模板解析器

通俗的话就是你运行了一个阉割版的vue,一个残缺的vue,你运行的vue不全,没有模板解析器

其实就是这代码出现的问题

 解决方法

办法1.引用一个完整版的vue

不引入组件还是报错

寻找原因：去找vue文件夹,我们这边写的引用是vue,也就是直接引用地址为vue文件夹

 此时我们再看文件说明配置 package.json

 里面有一个module属性,其实当你用es6进入vue文件夹,就默认引入的是,vue.runtime,esm.js文件

而这个文件就是一个残缺版的vue,残缺了模板解析器当少了模板解析器你template对象就没人帮你解析了

验证：去dist文件夹里面找,这么的js中,只有vue.js才是原汁原味的vue,其他都是它的改变或者删减版

 

然后在vue.runtime.esm.js里面写console.log进行验证是否运行了这个js文件

发现666输出,证明了确实引用的是一个残缺版的vue

 

所以

解决办法（1）引用一个完整版的vue

引入一个完整版的vue

发现不报错了 

但是有个问题,那为什么vue要默认引用一个残缺版的vue呢？？

 解决办法（2）就引用一个残缺版的vue

如果正常写的话,就是会报错,因为没有模板解析器.在template里写的标签就解析不了就报错

 

 然后这边就要用到render函数了

办法2.把预编译对象放入render函数

我们这边先不写成render函数的精简形式

render是一个函数,并且要有返回值,不然vue会报错

 

随便返回一个null,

 

就不报错,而且还发现这样写就vue帮你调用了render了

 

并且render函数还可以传入参数

验证：render函数还可以传入参数
传入a并看a是什么属性

发现是一个函数

 

官方一般把a写成createElement

而这个函数里第一个写标签类型,第二写标签内容,并且用return对它进行输出

 

运行发现页面显示了

 

 为什么要引出render呢,其实就是它考虑到你引用的是一个残缺的vue.js,一个不会解析template项的vue.js

 

 然后对该render函数简化

因为render函数里,没有this所以可以写成箭头函数

 然后只有一个参数就可以把括号省略了

由于函数中只有一个return,就可以写成下面形式

 

然后因为createElement太长了,把它换成q

这边之所以括号里面是两参数，是因为是h1是html中的内置元素,这个元素里,要写,元素的内容所以得传两个参数

对应app组件直接写入就行,因为app里面就是对应得内容,它是在vm上的

但是不能在App上加‘’！！！！！！！！！

 

如果加了''就表示,在html上创建一个html中的App标签元素,但是html中没有App标签所以会报错

 错误写法

 不加引号就读变量了 读到了上面引用的App

运行网页成功

 

 但是为什么vue团队要进行创建好多个vue呢

 因为vue里面有两个东西

一个为核心,即周期、处理事件等等都在里面

另一个为模板解析器,就是template解析模板,其中它占了vue体积的三分之一

粉丝框为核心,橙色框为解析器

当程序员打包的时候,webpack,把vue文件转化成浏览器可以识别的类型html css js 等,但是此时这个模板解析就很多余,因为webpack就能实现转化,在打包时,就不需要模板解析了,这样就可以让打包出来的文件小一点

验证：

我们看文件的大小,发现,只要带了runtime,就是运行时的vue都比vue.js要小,因为它们都没有模板解析器,esm 其实就是es6 +module es6模块化，也就是如果你创建项目是按照,es6模块化引入的则,就会使用到这个js文件

虽然觉得,只是想,减少几百kb的容量,增设了一个render函数,有点小题大做但是通过下面一个例子

买工人就相当于用了vue的完整版,具有模板解析器,而雇佣工人就像使用了render函数,使用的是残缺的vue,但是打包后,工人就消失了,不会像,第一种一样,铺好之后但是工人还需要养

 其实这边使用了render函数,引用了一个残缺的vue作用

1.减少了打包的文件大小2.使打包文件不会出现没有用处的模板解析器

注：

会发组件文件中,会出现template标签,而这边vue为它专门找了一个库 ,这边的vue-template-compiler 使专门编译标签的上的template的,js里的template对象是无法解析的

总结：

 

 对于这个render函数一般只会在main.js中使用,在一些组件中都不会去使用,因为组件中写得都是template标签,vue专门设置一个库去解析它

从零开始搭建一个vue.js的脚手架
qq_32347235的博客
02-27 1万+
从零开始搭建一个vue.js脚手架在谷歌工作的时候，我们要做很多界面的原型，要求快速上手，灵活运用，当时用的一些现有框架，比如angular，太笨重了——尤雨溪（Vue.js 作者）vue.js是现在一个很火的前端框架，官网描述其简单易用，灵活度高，性能好本篇文章基于Windows系统公司的项目前端框架选择了vue，最近也一直在学习它，今天写一篇Vue-cli脚手架搭建的学习记录，以后忘记了再来查阅
【Vue】高级系列（二）配置Vue脚手架-npm方法-vscode配置-vue.config.js-项目打包与发布-ESlint使用
YK菌的博客
01-30 2887
学习使用vue-cli Vue官方提供的脚手架工具
main.js 中的 render函数
qq_40792800的博客
11-16 1092
至于为啥 脚手架会引入一个 运行时的 Vue 而不是 使用一个完整版的Vue，这是因为，当我们开发完毕之后，通过webpack打包之后，生成的都是可以直接让浏览器识别的 html、js、css文件，不需要 模板编译器这玩意，在打包的时候也可以节省一点 Vue 包的体积。说成大白话就是，我们现在使用的 Vue 是阉割版的，不包含模板编译器，这是因为 vue-cli 在搭建项目的时候，用的就是不带编译模板的Vue.js。在同一个目录下，找到 Vue.js 这个就是最完整的 Vue，包含了Vue 的所有功能。
vue3（1）——main.js、模板语法
最新发布
吃西瓜的年年
09-15 461
main.js是Vue的入口文件，负责初始化Vue实例并挂载应用到HTML页面。使用双大括号（Mustache 语法），双大括号里面内容会被替换为相应组件实例中。使用 v-html指令，将一段HTML代码渲染到元素。值为字符串或null，null表示显示移除该绑定。如要传给复杂的动态参数，推荐使用计算属性。开头的Attribute中使用。属性改变时它也会实时更新。
Vue中main.js里的render是干什么的
laya1211的博客
09-09 538
从vue官网中知道，vue提供了两个版本，完整版和只包含运行时版，差别是完整版包含编译器，就是将template模板编译成AST，再转化为render函数的过程，而运行时版不包含模板解析器，因此必须提供render函数。实际上我们引入的是vue.runtime.esm.js，是精简版的Vue，它与完整版的不同就是少了模板解析器，那完整版的Vue哪里呢？当我们的项目编写完成，经过webpack打包之后，模板解析器就没有用了，我们没必要再留着它，所以一开始引入不包含模板解析器的版本即可。
关于main.js中render函数的问题
weixin_46218220的博客
12-18 545
runtime-compiler和runtime-only 脚手架推荐使用的是runtime-compiler，但是需要在使用的时候选择only进行使用。 runtime-conpiler的运行过程：template -》ast -》render -》vdom -》ui runtime-only的过程：render -》vdom -》ui 在main.js中不在使用template，采用render可以提高其性能，同时也节省了相关的代码。 ...
Vue脚手架里面的main.js里面的render是什么？
qq_46351529的博客
07-13 217
菜鸟一个，记录下在学习Vue的坑！！！！！！！！！！！！！！！！
vue27：脚手架详细介绍main.js
m0_73919066的博客
06-09 335
函数（createElement）来创建虚拟 DOM 节点。这在需要手动控制 DOM 结构或执行更复杂的渲染逻辑时非常有用。函数通常在需要更高级的自定义时使用，比如动态组件、vnode 操作等。函数，Vue 将使用模板（template）来生成虚拟 DOM。这种方式提供了更多的灵活性和控制，允许你使用 Vue 的。函数是一个可选的选项，它允许你自定义组件的渲染逻辑。是更常见的选择，因为它更简洁，易于理解和使用。如果你没有在 Vue 实例中提供。在 Vue 2.x 中，在 Vue.js 中，
vue - Vue脚手架.doc
07-09
在 `main.js` 文件中，我们使用了 `render` 函数来渲染应用程序。`render` 函数接受一个参数，即要渲染的组件。可以使用箭头函数简写，例如：`render: h => h(App)`。 5. Vue 版本 Vue 有多个版本，包括完整版、...
vue的HelloWorld项目结构分析、实现自己的一个简单Vue应用、render函数的理解、修改main.js名称为app.js
Bulut0907
08-30 1248
导入的这个是vue的runtime build，由vue/package.json的module属性值dist/vue.runtime.esm.js决定，不包含template解析器。Vue的项目底层还是用webpack进行打包的，webpack的配置文件是webpack.config.js，这个配置文件我们访问不到。在Vue中我们可以通过vue.config.js对webpack的一些配置进行配置。public/index.html和src/main.js我们使用前面创建的项目的。
Vue 脚手架、配置代理、ref属性、props配置项
YuLong的博客
12-22 594
文章目录Vue脚手架ref属性props配置项 Vue脚手架 ref属性 props配置项
vue项目main.js使用方法
01-21
解析 src/main.js是入口文件，主要作用是初始化vue实例并使用需要的插件 在main.js文件中定义了一个vue对象,其中el为实例提供挂载元素 //基础设置 import Vue from ‘vue' //引入路由和vuex import router from './router' import store from './store/store’ import App from './App' //实例化一个Vue，挂载到id为app的div里面，这个vue实例有个局部组件App new Vue({ el: '#app’, router, store,
vue手脚架main.js文件
qq_39600617的博客
11-07 348
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import ax...
Vue第三章脚手架之最全render函数、props、mixin混入、插件、浏览器本地存储、组件自定义事件_绑定、解绑、全局事件总线、消息订阅与发布、nextTick、Vue过度与动画
AI~天海的博客
02-16 628
第三章——开始简写 安装脚手架 npm i -g @vue/cli vue创建脚手架 vue create 项目名称 cd 项目名称 npm run sever http://localhost:8080/ Vue：核心+模板解析器(解析template) 一、render函数 利用模块化的引用方法引用vue vue包中的package.json中的module控制ES6引入的哪个具体的js文件 render函数有返回值 没有用到this就可以用箭头函数 1、vue.js完整版 核心+模板解析器(解析tem
Vue知识点整理（三）- Vue脚手架（2）- render函数、ref属性、props配置、mixin混入
JHY97的博客
04-17 1534
一、render函数 完整render函数写法 new Vue({ render(createElement) { return createElement("元素名", "内容"); }, 精简写法 // render采用箭头函数，省略小括号，并且由于箭头函数只有一句函数体，可省略掉return，若参数内容为组件，可只传一个参数，没必要写具体内容 render:自定义参数名 => 自定义参数名(组件名), 二、关于不同版本的Vue 1. vue.js 与 vu
41-vue中-接口main.js中-render渲染函数(简化了映射组件为标签、使用标签的写法)
code^_^熊的博客
03-10 360
1.使用render渲染函数之前的写法 new Vue({ el:"#app", components:{ App }, template:"<App/>" }) 2.使用render渲染函数之后的写法 render渲染函数，相当于将component属性和template属性二者的代码换作了简化写法 new Vue({ el:"#app", render:h => h(App)//传入的参数h是一个函数createElement()函数的对象 }) 3
Vue学习第11天——分析Vue脚手架中的main.js文件
背心的博客
08-22 1016
Vue脚手架中main.js文件代码分析
vuejs Render 函数
坐在那边看天空 的博客
01-04 5808
核心函数； createElement： createElement接收3个参数： 第一个参数可以是HTML标签名，组件或者函数都可以；此参数是必须的； 第二个为数据对象（可选）； 第三个为子节点（可选）。 附上一个非常简单的createElement函数demo； var app = new Vue({   el:"#app",   render:createEle
VUE中main.js、App.vue、index.html、render函数
alokka的博客
11-19 1570
1
Vue脚手架解析：项目结构与Vue版本差异
"尚硅谷vue脚手架笔记" 在学习 Vue.js 开发时，Vue CLI（命令行工具）为我们提供了一个快速搭建项目环境的脚手架。这篇笔记主要围绕着Vue CLI创建的项目文件结构和Vue.js的不同版本进行阐述，帮助开发者更好地理解...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值