vue程序运行过程(runtime-compiler和runtime-only)

最新推荐文章于 2024-06-23 14:48:36 发布
最新推荐文章于 2024-06-23 14:48:36 发布
阅读量1.7k 收藏 3
点赞数 6
分类专栏： vue 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42043532/article/details/108066372
版权

在这里插入图片描述
这个图就是一个vue文件的完整运行过程，在用vue-cli2创建项目时,会让我们选择两种类型：1.runtime-compiler     2.runtime-only
这两种类型的区别就在于：
1.runtime-compiler：
template -> ast -> render -> vdom -> ui
通过这种方式创建的项目vue文件会完整的走一遍流程
2.runtime-only
render -> vdom -> ui
通过这种方式创建的项目vue文件跳过了前两个流程，所以性能更高,代码量更少
// 省去了前两个步骤,那么.vue文件的template是由谁来处理的呢？
// vue-loader用来加载.vue文件
// vue-template-compiler用来解析.vue文件,将<template>解析成render函数

(新手画图，画的不好不对的地方还请大佬们多多指点，画图不易，点个赞再走！多谢！)

大奔的大葱
关注
专栏目录
前端小白入门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的区别
鸭绒的博客
08-10 768
我们在利用脚手架创建项目时，在一个环节中会让我们选择runtime-compiler或runtime-only，这两者到底有什么区别呢？ 下面我们来创建两个项目，分别选中runtime-compiler和runtime-only:
如何运行一个Vue项目
01-20
如何运行一个Vue项目 一开始刚接手项目内的vue.js，或者在GitHub上找到vue.js的开源项目，会发现不知如何运行这个项目。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有了朦朦胧胧的认知，因此将环境搭建过程分享给大家。 1. 环境安装 首先，列出来我们需要的东西： node.js环境（npm包管理器） vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 安装node.js 从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。 安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功
Vue程序运行过程
qq_39285162的博客
11-18 257
如果在开发中，使用template，就需要选择Runtime-Compiler 如果在开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only runtime-compiler: template -> ast ->render -> v-dom -> dom runtime-only: render -> v-dom -> dom ...
vue程序运行过程
weixin_44803086的博客
12-31 325
runtime-compiler: template -> ast ->render -> v-dom -> dom runtime-only: render -> v-dom -> dom
解决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@...
Vue教程(四十)Runtime + Compiler和Runtime-only的区别
yuan_xw的专栏
08-14 1431
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 两种模式的理解
热门推荐
Jackie Huang
02-17 1万+
ps: 如果有任何问题可以评论留言，我看到后会及时解答，评论或关注，您的鼓励是我分享的最大动力 转载请注明出处： https://blog.csdn.net/qq_40938301/article/details/104342113 一、问题 在使用vue-cli脚手架构建项目时，会遇到一个构建选项 Vue build，有两个选项，Runtime + Compiler和Runti...
VUE 程序的执行过程（非常非常重要）
Sayesan的专栏
09-04 2181
因此，可以说`index.html`文件是整个Vue应用程序的入口点，而`main.js`文件是Vue应用程序的入口文件。在浏览器加载和执行的过程中，`index.html`和`main.js`的先后顺序是先加载`index.html`，然后引入并执行`main.js`文件。6. `App.vue`文件作为Vue应用程序的根组件，被包含在`main.js`中创建的Vue实例中，并通过`new Vue({...}).$mount('#app')`语句挂载到指定的DOM元素上。文件是显式引入的，不需要在。
vue 程序执行的过程
qq_45770253的博客
08-10 2031
首先是 vue 在 runtime-compiler 模式下进行执行的过程 通过 runtime-compiler 创建的项目，会经过上述图片中的 vue 程序运行过程，但是用 runtime-only 创建的项目，会直接从 render 函数 将 挂载的 App 变成 virtual dom(虚拟dom)，性能更加高效！而且 vue 的代码量更少！因此 runtime-only 小的 6KB 就是少了执行前两个步骤的代码。 让我们看下一下这两种不同的方法创建的 vue 项目中 main.js 文件的区别吧
vue的runtime
追风筝的人
05-11 1951
文章目录前言一、runtime二、compiler总结 前言 我在当初学习vue的时候，就有一个问题，那就是什么是runtime？在看学习视频的时候，就总能听到什么runtime版本，compiler版本，巴拉巴拉的。。。 今天我就好好的查了一下，到底什么是runtime，什么是compiler！ 在此记录一下！ 一、runtime 首先，runtime翻译过来就是运行时，在我找到的许多资料里显示，runtime版本没有编译器，不能使用template，只能使用render函数来渲染。但是有一件事是，我
一张图让你了解vue 整个运行过程
weixin_34162629的博客
01-29 540
vue 整个运行机制 总体看： 1.0 Vue.prototype._init() 1.1 options && options._isComponent resolveConstructorOptions(vm.constructor) vm.$options = mergeOptions() 2.0 initProxy(vm) 和 vm._renderProx...
了解vue里的Runtime Only和Runtime+Compiler
weixin_30907935的博客
03-17 188
转自：了解vue里的Runtime Only和Runtime+Compiler 扩展文章：Vue 2.0如何仅使用Runtime-only Build构建项目？ 可以看到有两种版本： Runtime Only 版本 和 Runtime+Compiler 版本。 1.Runtime Only 我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 we...
vue项目的运行
最新发布
RainbowTutu的博客
06-23 3643
npm有缓存时，常常出现安装依赖不成功的现象，且一旦出现这个问题，报错信息很完善，但根据报错信息一项一项去解决，却死活解决不了，还找不出原因。控制台输入下面命令清除npm缓存，npm有缓存时，常常出现安装依赖不成功的现象。package-lock.json记录了整个node_moudles文件夹的树状结构，还记录了模块的下载地址，但是它是基于项目作者的npm版本库生成的，若不删掉这个依赖文件，容易出现npm版本差异导致的报错。3、在启动的命令行窗口输入【npm run serve】，回车。
vue之Runtime+Compiler和Runtime+Only区别
atu1111的博客
09-22 396
  1).vue这选择Runtime+Compiler或Runtime+Only版本生成的项目，public 下面都有的 index.html 模板文件 <div id="app"></div>   html里面的div元素id为app可以不用在里面写内容，因为在main.js里的template里面的内容会对el绑定的元素进行替换。   这是Runtime+Compiler版本项目下main.js内容 new Vue({ el: '#app', components:
【vue-cli安装】runtime-compiler&runtime-only
qq_43228826的博客
02-08 577
vue-cli构建项目，可选择使用 runtime-compiler 或 runtime-only 分别创建出两个项目，其唯一的区别在main.js中，vue实例是否使用template 1.runtime-compiler 原理：template -- ast -- render -- Virtual Dom -- UI 1）内部将vue中的template模板解析成abstractsyntaxtree（ast）抽象语法树 2）抽象语法树再编译成render函数 3）render...
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-template-compiler还是没用
06-06
如果你已经安装了 `vue-template-compiler`，但是仍然出现了相同的警告，可能是你的构建配置没有正确地使用它。你需要在构建配置中将它与 Vue.js 一起打包。 如果你使用的是 Vue CLI，可以在 `vue.config.js` 文件中配置： ```javascript module.exports = { runtimeCompiler: true } ``` 将 `runtimeCompiler` 设置为 `true` 就可以使用包含编译器的完整版本了。 如果你没有使用 Vue CLI，需要查看你的构建配置，确保正确地使用了 `vue-template-compiler`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值