vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解


Posted in Javascript onDecember 11, 2018

vue-cli 3.0 正式版于 8月10号发布,但是3.0 与 2.0 版本在搭建项目时到底有何不同呢?下面做一下简单的介绍,希望可以帮到有需要的朋友

1、 全局安装vu-cli 3.0  npm install -g @vue/cli  (如果之前安装了2.0版本,先卸载 npm uninstall -g vue-cli ) ; 安装完 3.0 后,有以下两种创建项目的方式:

a 、 指令: vue create < project-name> ;然后会出现默认和手动两个选项,跟着步骤走就好;下面选择手动

vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

等等

b、用视图创建项目  vue  ui 

vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

然后点击创建跟着步骤走就好;

如果:你个人还是很想用之前的创建项目的方式 ,那你则需要安装 (npm install -g @vue/cli-init) 这样就可以像之前一样创建项目  eg:   vue init webpack vue-program

2、用vue-cli3.0版本创建的项目与2.0版本相比较,我们会发现,文件目录少了很多 eg:build、config,那么如何像vue-cli 2.* 之前关于端口号的配置、打包之后的路径的配置、图片的配置等,到哪里配置呢??vue-cli 3.0 可以在项目的根目录下新建一个 vue.config.js 文件,之前繁琐的配置都可以在这里直接配置。

官方是这样说的。vue.config.js 是一个可选的配置文件,如果项目的(和package.json 平级)根目录中存在这样一个文件,那么他会被 @vue/cli-service 自动加载,(并覆盖其内部的配置)

下面我们就看一下vue.config.js 里的相关配置

vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

更多的相关配置,可参考官网  https://cli.vuejs.org/zh/config/#vue-config-js

 3、相关配置配好了,但是在打包时,如何配置(测试、预发、生产)环境呢?

这是我们只需要在根目录下创建 后缀名为.env(.env.prod  / .env.pre  /  .env.test)的文件,将你需要的环境配进去就可以了  eg:

vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

这里需要注意一点:由于我们再打包时,不需动NODE_ENV,所以这里面我们可以直接用production ,(如果改了,你打包出来的项目会发现会少很多),如果不想用,那你则需要去底层进行修改相应的配置。

4、最后指出配置好环境以后,我们需要在package.json里面配置相应的指令;

“buildTest” :“vue-cli-service build --mode test”,

"buildPre" : "vue-cli-service build --mode pre"

"build" : "vue-cli-service build --mode prod"

// 打包,会把process.env.NODE_ENV设置为步骤4中‘.env.alpha'文件设置的值。

// 注意,这里 “--mode 名字“ 要和步骤2中文件名“.env.名字”名字保持一致

vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

如果你还想在同一项目打不同的生产包,也只需在.env文件里面加上相应的配置,但是与vue-cli 2.0 比较,你需要建多个.env文件,来控制的包 eg:

vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

这样我们基本上就用vue-cli 3 完成了vue-cli 2 所有的配置了

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 #Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 #Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 #jQuery
如何让node运行es6模块文件及其原理详解
Dec 11 #Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 #jQuery
详解react阻止无效重渲染的多种方式
Dec 11 #Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 #jQuery
You might like
也谈 PHP 和 MYSQL
2006/10/09 PHP
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
php简单统计中文个数的方法
2016/09/30 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
Python中的异常处理简明介绍
2015/04/13 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
python中os包的用法
2020/06/01 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
2014年高三毕业生自我评价
2014/01/11 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
小学副班长竞选稿
2015/11/21 职场文书
银行求职信范文
2019/05/13 职场文书