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 相关文章推荐
一个JQuery操作Table的代码分享
Mar 30 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
详解vue中组件参数
Jul 09 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 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
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python通过select实现异步IO的方法
2015/06/04 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
python第三方库学习笔记
2020/02/07 Python
python实现井字棋小游戏
2020/03/04 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
python 将Excel转Word的示例
2021/03/02 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
幼儿园师德演讲稿
2014/05/06 职场文书
预备党员转正考核材料
2014/06/03 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
党员民主评议总结
2014/10/20 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
聘任证明怎么写
2015/03/02 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书