资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

用vue-cli初始化项目带编译器和不带编译器的区别有哪些

这篇文章主要为大家展示了“用vue-cli初始化项目带编译器和不带编译器的区别有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“用vue-cli初始化项目带编译器和不带编译器的区别有哪些”这篇文章吧。

成都创新互联专业成都做网站、成都网站建设,集网站策划、网站设计、网站制作于一体,网站seo、网站优化、网站营销、软文营销等专业人才根据搜索规律编程设计,让网站在运行后,在搜索中有好的表现,专业设计制作为您带来效益的网站!让网站建设为您创造效益。

在用vue-cli初始化项目的时候,选择带编辑器和不带编辑器的区别,如图:

用vue-cli初始化项目带编译器和不带编译器的区别有哪些

图中第一句用红框圈住的话:Runtime+ Compiler:....

第二句:Runtime-only:.......

从字面意思就可以看出初始化项目过程中,选第一行的话生成的vue项目就是带编译器的,选第二句的话就是不带编译器的,同时它们都是选择的运行时版本。

首先咱们测试一下,假如用vue-cli生成项目时,在遇到Vue Build选项时,选择的是第二行,那你的项目中引入的vue版本应该是Runtime-only不带编辑器的版本,回忆一下上一篇文章,支持运行时并且不带编译器的版本是哪个呢?

可以发现是vue.runtime.esm.js和vue.runtime.common.js这俩版本,这俩啥区别呢?

前者遵循commonjs模块化规范,后者支持es6模块化规范,最新版本的vue-cli构建vue项目用的是webpack2,而webpack2支持以上两种规范,如果你用vue-cli初始化项目的时候选择第二行,那项目中引入的版本为vue.runtime.esm.js或者是vue.runtime.common.js

验证一下,打开vue项目中的package.json查看main属性如下:

用vue-cli初始化项目带编译器和不带编译器的区别有哪些

那如果初始化过程中选择的是第一行呢,运行时带编译器。结果生成的vue项目中使用的是哪一个版本的vue呢?

回忆一下上一篇文章,支持运行时并且带编译器的是8个文件中的哪一个呢?

可以发现vue.esm.js与vue.common.js这两个版本都带编译器并支持运行时的,那选哪一个呢,其实都可以。

那我们验证一下,选择第一行后生成的项目中vue的安装包的package.json中查看main属性:

用vue-cli初始化项目带编译器和不带编译器的区别有哪些

发现结果不对,main属性还是vue.runtime.common.js,怎么会这样呢?原来vue-cli在初始化项目后,修改了一下vue项目导入得别名,当在项目中导入vue时,导入的是vue的别名指向的版本。

那别名在哪里修改的呢?在项目中build中的webpack.base.conf.js中修改的,如图:

用vue-cli初始化项目带编译器和不带编译器的区别有哪些

那这句话啥意思呢?

可以查看webpack的文档http://www.css88.com/doc/webpack/configuration/resolve/大致意思就是,在项目中导入vue,导入的版本实际上是这里指向的版本,这里会覆盖package.json中的main属性,加上$是为了精确匹配。

以上是“用vue-cli初始化项目带编译器和不带编译器的区别有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


名称栏目:用vue-cli初始化项目带编译器和不带编译器的区别有哪些
网页地址:http://www.cdkjz.cn/article/joddjs.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220