对Vue中 runtime-compiler 和 runtime-only 两种模式的理解

最新推荐文章于 2024-08-16 09:16:58 发布
最新推荐文章于 2024-08-16 09:16:58 发布
阅读量1.2w 收藏 42
点赞数 19
分类专栏： vue JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40938301/article/details/104357910
版权
本文详细介绍了Vue的runtime-compiler和runtime-only两种模式的区别和工作原理。runtime-only模式体积更小，运行速度更快，但不支持template，仅限于.vue文件内。runtime-compiler则包括编译器，可处理template，但体积稍大。理解这两种模式有助于优化Vue应用的性能和打包大小。
摘要由CSDN通过智能技术生成

ps: 如果有任何问题可以评论留言，我看到后会及时解答，评论或关注，您的鼓励是我分享的最大动力

转载请注明出处：

https://blog.csdn.net/qq_40938301/article/details/104357910

 

一、问题

在使用 vue-cli 脚手架构建项目时，会遇到一个构建选项 Vue build，有两个选项，Runtime + Compiler和Runtime-only：

· Runtime + Compiler: recommended for most users

（运行程序+编译器:推荐给大多数用户）

· Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere

（仅运行程序: 比上面那种模式轻大约 6KB min+gzip，但是 template (或任何特定于vue的html)只允许在.vue文件中使用——其他地方用需要 render 函数）

 

其实构建时的英文解释已经很简洁清晰了，但是第一次看的话或者不了解英文可能还是会比较 懵逼

最低0.47元/天 解锁文章
学霸的男人
关注
专栏目录
runtime-compiler和runtime-only的区别
轻风细雨_林木木
04-06 831
Vue的编译渲染过程 template --> ast --> render函数 --> VDom --> 真实DOM 先将template解析(parse)成抽象语法树(ast) 将ast编译(compiler)成render函数 将render函数渲染(render)成虚拟DOM 最后将虚拟DOM渲染成真实DOM runtime-compiler的步骤 template --> ast --> render函数 --> VDom --> 真实DOM
runtime-compiler和runtime-only
m0_54177068的博客
03-15 1098
首先看一下，这两种模式写法上，只有在main.js中不一样 runtime-compiler //其中App.vue模块中为组件内容 import Vue from 'vue' import App from './App' new Vue({ el:'#app', template:'<App/>', components:{App} }) runtime-only import Vue from 'vue' import App from './App'
v-runtime-template 项目教程
最新发布
gitblog_00634的博客
08-16 354
v-runtime-template 项目教程 v-runtime-templateVue component for compiling templates on the fly using a v-html like API项目地址:https://gitcode.com/gh_mirrors/vr/v-runtime-template 1. 项目的目录结构及介绍 v-runtime-tem...
vue的runtime
追风筝的人
05-11 1951
文章目录前言一、runtime二、compiler总结 前言 我在当初学习vue的时候，就有一个问题，那就是什么是runtime？在看学习视频的时候，就总能听到什么runtime版本，compiler版本，巴拉巴拉的。。。 今天我就好好的查了一下，到底什么是runtime，什么是compiler！ 在此记录一下！ 一、runtime 首先，runtime翻译过来就是运行时，在我找到的许多资料里显示，runtime版本没有编译器，不能使用template，只能使用render函数来渲染。但是有一件事是，我
vue2.x源码解析准备--Runtime Only 和 Runtime+Compiler
原鑫的个人博客
10-03 1113
vue2.x源码解析准备–Runtime Only 和 Runtime+Compiler 1.1 Runtime Only Runtime Only相比Runtime+Compiler更加轻量，但是缺点是不能够编译jsx，在vue源码中，无论是render函数，还是template最终都是编译成render函数进行渲染的，所以，使用Runtime Only有时需要自己手动配置webpack对模...
【vue】 runtime-compiler和runtime-only的区别
鸭绒的博客
08-10 768
我们在利用脚手架创建项目时，在一个环节中会让我们选择runtime-compiler或runtime-only，这两者到底有什么区别呢？ 下面我们来创建两个项目，分别选中runtime-compiler和runtime-only:
解决vue和vue-template-compiler版本不一样的快捷办法
01-07
vue项目，package.json中Vue和vue-template-compiler版本不一致时，执行npm run dev有时会报错 提示如下内容 in ./src/views/login/index.vue Module build failed: Error: Vue packages version mismatch: - vue@...
前端小白入门VueCLI之runtime-compiler和runtime-only区别
weixin_43916611的博客
12-27 807
文章目录前言一、不同之处二、开始分析理解render函数总结 前言 今天学到了runtime-compiler和runtime-only的区别，我们一起来走一遍学习的这个流程~ 一、不同之处 在我们使用脚手架创建项目的时候 命令行提示我们是选择 1.runtime-compiler 2.runrime-only 从这里我们一起分析为什么会出现这个选择 我们分别按照上下的选择创建两个项目： 我们发现了它们不同的地方在于main.js runtime-compiler的main.js runtime-o
Vue教程(四十)Runtime + Compiler和Runtime-only的区别
yuan_xw的专栏
08-14 1429
Vue教程(四十)Runtime + Compiler和Runtime-only的区别 在使用vue-cli脚手架构建项目时，会遇到一个选项Vue build(vue构建)，有两个选项，Runtime + Compiler和Runtime-only Runtime + Compiler Runtime + Compiler: recommended for most users 运行时+编译器:推荐给大多数用户 Runtime-only Runtime-only: about 6KB lighter m
Vue中 runtime-compiler 和 runtime-only 两种构建模式
weixin_44100002的博客
09-10 1723
一、介绍 在使用 vue-cli 脚手架构建项目时，会遇到一个构建选项 Vue build，有两个选项，Runtime + Compiler和Runtime-only： · Runtime + Compiler: recommended for most users （运行程序+编译器:推荐给大多数用户） · Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed i
Vue CLI 使用和安装
幻辰科技 nbhctec.com
05-13 259
安装VueCLI : npm install -g @vue/cli 然后拉起CLI2 :方便可以创建CLI 2的项目： npm install -g @vue/cli-init 1、 创建CL2 的项目 vue init webpack 项目名称 ?Project name vuecli2 //项目名称 ? Project description test vue cli2 //项目说明 ? Author Ts //作者 ? Vue build (Use a...
VUE程序运行过程-runtime-complier和runtime-only的区别
ICanWin_lll的博客
01-26 769
一.VUE程序运行过程 当把template传递给vue实例的时候，vue实例会把该模板内容保存到vm.options， 然后对该template解析成ast(抽象语法树) 将ast编译为render()函数，通过render函数翻译成虚拟DOM 将虚拟DOM渲染成真实的DOM 二.Runtime-Compiler和Runtime-only 1.Runtime-Compiler： 选择Runtime-Compiler创建的项目main.js： import Vue from 'vu
webpack 加载vue组件webpack You are using the runtime-only build of Vue where the template compiler is no
cominglately的博客
06-04 5082
场景 . webpack 加载vue进行开发的时候, 曝出这样错误 webpack You are using the runtime-only build of Vue where the template compiler is not available . webpack的配置情况是 { test : /\.vue$/...
vue中runtime-only和runtime-compiler的使用区别！！
qq_46623655的博客
05-06 359
今天学习完了搭建脚手架2，对runtime-only和runtime-compiler的理解不是很熟练，本不想写这篇博客的，但觉得会有帮助，所以最后有了这篇博客。 左侧图片是使用runtime-compiler，右侧图片是使用runtime-only，这两者的区别在于能否解析template模板，前者能够解析，而后者不能解析。 runtime-compiler在遇到.vue文件时，就是当作vue使用，所以能够解析template。但是runtime-only在遇到.vue文件时，解析为.js文件，其中的t
vue 中 runtime-only和runtime-compiler
xinyuan的专栏
05-18 458
一、vue内部过程　 　　1.首先将vue中的模板进行解析解析成abstractsyntaxtree（ast）抽象语法树 　　2.将抽象语法树在编译成render函数 　　3.将render函数再翻译成virtualdom虚拟dom 　　4.将虚拟dom显示在浏览器上 二、runtime-only和runtime-compiler的区别 　　runtime-only比runtime-compiler更快，因为它省略了vue内部过程中的第一个过程，如果是runtime-compil...
VUE 的 Runtime Only 和 Runtime + Compiler
星环
08-22 393
VUE 的 Runtime Only 和 Runtime + Compiler
已安装vue-template-compiler还是没用
06-06
如果你使用的是 Vue CLI，可以在 `vue.config.js` 文件中配置： ```javascript module.exports = { runtimeCompiler: true } ``` 将 `runtimeCompiler` 设置为 `true` 就可以使用包含编译器的完整版本了。 如果...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值