vue几种编译_理顺8个版本vue的区别(小结)
一共8个版本的vue
术语
完整版:同时包含编译器和运行时的版本。
编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。
运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
UMD:UMD 版本可以通过
CommonJS:CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。这些打包工具的默认文件 (pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js)。
ES Module:ES module 版本用来配合现代打包工具比如 webpack 2 或 Rollup。这些打包工具的默认文件 (pkg.module) 是只包含运行时的 ES Module 版本 (vue.runtime.esm.js)。
重点:
如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器
通俗来说,就是runtime版本是无法对template进行解析的
一共8个vue版本,都是用在什么情况下的?
默认会用的哪个vue版本,vue-cli里用的哪个版本?
如何指定使用哪个版本的vue?
不急,从2个维度去理解这8个版本。
根据是否需要编译器分为: 运行时版本 和 完整版
根据这个vue代码用在什么地方: 分为UMD / CommonJS / ES Module
【运行时版本】和【完整版】的区别: 用不用编译?
完整版: 包括编译器和运行时的版本
编译器: vue里用的语法是需要被编译的
运行时: 用来创建Vue实例、渲染、处理虚拟Dom,可以理解为除了编译器剩下的代码都属于运行时
如果你需要使用template的语法,就需要编译器,那么就要使用完整版
用了.vue文件的大多数情况下,你可以用运行时版本
当你使用vue-loader或vueify的时候, *.vue文件内部会预编译成JS,所以你在最终打好的包里,
实际上是不需要编译器的,所以这种情况,应该用运行时版本,毕竟运行时版本的体积比完整版要小30%
如果我一定要用完整版的呢? 如何选择版本呢?
你需要在webpack里配置alias
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
}
}
UMD / CommonJS / ES Module 的区别: 你的vue用在什么地方?
当你通过script标签来引用vue源码时,用UMD版本
当你通过低版本的打包工具,比如webpack1,用CommonJS版本
当你通过现代打包工具比如 webpack 2 或 Rollup,用ES Module版本
其他
vue源码会根据process.env.NODE_ENV来判断是用生产还是开发环境的代码
webpack里可以有自带的 new webpack.DefinePlugin()来设置process.env.NODE_ENV
类似这样
new webpack.DefinePlugin({
'process.env': env
}),
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
vue几种编译_理顺8个版本vue的区别(小结)相关推荐
- vue几种编译_nvue不同编译模式介绍
HBuilderX 自 2.0.3 版本开始,nvue文件同时支持两种编译模式: weex 模式:老模式,使用 weex组件,写法同weex标准写法.只能在 App 端中运行,部分 uni-app J ...
- vue data数据修改_史上最强vue总结,万字长文
vue框架篇 vue的优点 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb: 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习: 双向数据绑定:保留了angular ...
- vue和react相同点_我在React和Vue中创建了相同的应用程序。 这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
- vue 箭头函数兼容性_前端学习计划之VUE学习(二)
创建一个实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的: 数据与方法 当Vue实例按照上述方式被创建时,Vue的响应式系统中就加入了data对象,在使用中可以直接通过属性的调用方式 ...
- vue 启动时卡死_十分钟浅入Vue 原理
vue原理 引用 众所周知vue是一个MVVM 渐进式框架,MVVM是vue的设计模式,在vue框架中数据会自动驱动视图. 1.MVVM设计模式 解释 View是视图,就是DOM:对应视图也就是H ...
- ant design vue table 高度自适应_很受欢迎的vue前端UI框架
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...
- vue.js反编译_基于electron-vue开发的微信小程序反编译客户端
开源一个小程序反编译客户端 咨询小程序反编译的同学比较多,虽然有开源库但是还是有同学不清楚如何去操作,所以索性做了一个客户端方便进行小程序的反编译 # 技术选型 网上已经有大佬实现了C#版的反编译工具 ...
- vue js 反编译_学会了Vue,前端面试却没找到工作?
也不知道为什么?最近到处都在宣传Vue.不可否认Vue是一个很不错也很值得学习的前端开发框架.然而大家一味地跟风,难道是学会了Vue就可以在前端界驰骋?成为一名优秀前端工程师?找到满意的前端工作了吗? ...
- vue 文字无缝滚动_手把手教你搭建 Vue 聊天室
WebSocket简介 WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器之间的数据交换变得更加简单,并且允许服务端主动向客户端推送数据.(HTTP协 ...
最新文章
- 2021年大数据Flink(八):Flink入门案例
- 基于mpi的奇偶排序_并行程序设计(第2版)pdf
- Vue学习之路1 小白起步
- armv8/arnv9的aarch64架构中系统寄存器的分类和总结
- java.lang.NoClassDefFoundError: org/springframework/context/ApplicationContext崩溃解决
- nyoj--891--找点(贪心)
- 网站移动版本开发踩坑实录二
- 为什么要做漏洞扫描呢?
- 动态模型之增压暂停【FunTester测试框架】
- Jquery easyUI datagrid载入复杂JSON数据方法
- 解决华为手机无法使用Android StudioUSB调试功能
- 洛谷P4234 最小差值生成树
- 00.设计模式之六大原则
- 第6节 构建简单局域网并实现远程管理路由器与交换机——基于PacketTracer仿真
- HCL Domino/Notes专业课程和认证体系介绍
- Excel分组行转列
- 【PAT甲级 - C++题解】1147 Heaps
- App 被拒后或被下架 向Apple获取帮助或申诉渠道汇总
- Android 内存优化- ANR 详解
- iOS 16测试版目前已知问题和Bug汇总
热门文章
- 修改Win10下搜狗输入法的托盘区图标
- 沃达丰的云原生之旅:新老结合
- 在360浏览器怎么找html,360浏览器,小编教你怎么找360浏览器收藏夹路径
- String截取指定内容
- 怎么开分屏_智能会议平板市场前景怎么样?智能会议平板从哪些方面提升了企业的会议效率?...
- 还在为程序乱码烦恼?看看这篇文章吧,程序乱码大集合
- PR 2019 快速入门(6)
- fastreport 转PDF 中文 乱码 ARIAL
- NATAPP + i996 内网穿透
- vue2.0 + router 3. 0 动态添加路由