资讯专栏INFORMATION COLUMN

理顺8个版本vue的区别

jzman / 1780人阅读

摘要:理顺个版本的区别一共个版本的一共个版本都是用在什么情况下的默认会用的哪个版本里用的哪个版本如何指定使用哪个版本的不急从个维度去理解这个版本。

理顺8个版本vue的区别 一共8个版本的vue

一共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
    }),

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94129.html

相关文章

  • 关于vue编译版本引入问题

    摘要:改为原因是,使用属性,需要引入带编译器的完整版的而如果在文件里面使用这种形式,然后使用引入,则不需要完整版的,因为使用时文件会自动预编译成。其实官网中已有明确说明对不同构建版本的解释其他相关文章理顺个版本的区别 下班过目遇到一个错误 [Vue warn]: You are using the runtime-only build of Vue where the template co...

    z2xy 评论0 收藏0
  • 从零开始:一正式vue+webpack项目目录结构是怎么形成

    摘要:一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的接下来闰土大叔带你们一起手摸手学起来。 如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手。一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起来。 初级前端初始化目录篇 项目伊始,我们肯定是先在terminal终端命令...

    liangdas 评论0 收藏0
  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    li21 评论0 收藏0
  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    sarva 评论0 收藏0
  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    AaronYuan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<