使用vue-cli4.0快速搭建一个项目的方法步骤


Posted in Javascript onDecember 04, 2019

前言

最近公司的项目终于到了空闲期,而闲不住的我终于把目标放到了项目的迁移上面

因为公司的项目比较早的原因(虽然当时vue-cli也出来了一段时间,但是不敢轻易尝试啊!)

所以使用的环境还是 vue2.x 版本的,而又因为公司的前端项目都是我来搭建的原因(并不是技术大佬,入职早!)

所以所有项目开发的时候一直在用的 vue-cli2.0,后来项目多了也没时间就没往 vue-cli3.0 迁移

现在终于到了空闲期,可以尝试着慢慢迁移了

本篇文章就是主要记录迁移的过程和 vue-cli3.0 的搭建过程

一、升级本地环境

因为 vue-cli3.0 要 nodeJs ? 8.9(官方推荐 8.11.0+),所以我们先去 官网下载 一个稳定的新版本覆盖本地版本

我安装的是 node12.13.0 版本,因为之前我本地全局安装了 2.0 的环境,所以需要全局卸载再安装 3.0

npm uninstall -g vue-cli
 
npm install -g @vue/cli

安装好了之后输入 vue -V 查看版本

使用vue-cli4.0快速搭建一个项目的方法步骤

我我我草!!!最近只顾着看技术了,没发现10月16日官方已经宣布 vue-cli4.0 已经正式发布了!!!

有没有搞错,我 vue-cli3.0 还没来得及用上呢!还好看了下文档,除了跟 vue-cli3.0 的目录有点变化其他没变。

那就直接开始搞 vue-cli4.0 吧!

二、搭建项目

vue-cli3.0 以后项目创建的命令变成了下面这样

vue create <Project Name> //文件名 不支持驼峰(含大写字母)

竟然还被嫌弃了我的网速,我还就不用 cnpm 了!

使用vue-cli4.0快速搭建一个项目的方法步骤

选择不使用淘宝镜像后,选择手动配置

default 是使用默认配置

Manually select features 是自定义配置

使用vue-cli4.0快速搭建一个项目的方法步骤

我的自定义配置如下

使用vue-cli4.0快速搭建一个项目的方法步骤

选择是否使用路由 history router,其实直白来说就是是否路径带 # 号,建议选择 N,否则服务器还要进行配置

使用vue-cli4.0快速搭建一个项目的方法步骤

css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的,dart-sass需要保存后才会生效

sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现

使用vue-cli4.0快速搭建一个项目的方法步骤

选择 ESLint 代码校验规则,提供一个插件化的javascript代码检测工具,ESLint + Prettier 使用较多

使用vue-cli4.0快速搭建一个项目的方法步骤

然后选择什么时候进行代码校验,Lint on save 保存就检查,Lint and fix on commit fix 或者 commit 的时候检查,建议第一个

使用vue-cli4.0快速搭建一个项目的方法步骤

下面就是如何存放配置了,In dedicated config files 存放到独立文件中,In package.json 存放到 package.json 中

本着项目结构简单的想法,我选择了第二个

使用vue-cli4.0快速搭建一个项目的方法步骤

最后就是是否保存本次的配置了,N 不记录,如果选择 Y 需要输入保存名字

我这里就不保存了,原因是熟能生巧!哈哈哈

使用vue-cli4.0快速搭建一个项目的方法步骤

然后就等待创建项目吧

使用vue-cli4.0快速搭建一个项目的方法步骤

出现如图红框所示的提示,就搭建成功,进入项目目录,直接输入 npm run serve 就可以了

使用vue-cli4.0快速搭建一个项目的方法步骤

你以为这样就完了吗?我也是这样认为的,可它不是这样的!

使用vue-cli4.0快速搭建一个项目的方法步骤

很明显,虽然项目能够正常启动,但是我的 nodeJs 版本用的太高了,然后我给回退到了 11.11.0 版本

虽然没影响太大的影响,但是我不想看见 WARN!回退之后,重新跑项目就不会有问题了。

使用vue-cli4.0快速搭建一个项目的方法步骤

三、环境配置

下面就是关于项目的环境配置了,我这边一般喜欢用 test、preview、production分别表示测试,预览,生产三种环境

修改 package.json 文件如下

"scripts": {
  "serve": "vue-cli-service serve",
  "test": "vue-cli-service build --mode test",      //测试
  "preview": "vue-cli-service build --mode preview",   //预览
  "build": "vue-cli-service build --mode production",  //生产
  "lint": "vue-cli-service lint"
},

在项目根目录下新建 .env.test、.env.preview、 .env.production 文件,分别对应三个环境的配置文件,注意,名字要与 --mode 后面的名字分别对应

.env.test 代码如下

NODE_ENV="test"
VUE_APP_BASE_URL="测试环境域名"

.env.pre 代码如下

NODE_ENV="preview"
VUE_APP_BASE_URL="预览环境域名"

.env.prod 代码如下

NODE_ENV="production"
VUE_APP_BASE_URL="生产环境域名"

ok,这样环境就配置好了,分别用以下命令来打包不同环境的包就可以了

npm run test  //测试
npm run pre   //预发布
npm run prod  //生产

另外需要说明一点的是,本地环境会默认从 .env.development 文件中读取配置

所以记得有需要记得新建一个然后存放配置

我的 .env.development 代码如下

NODE_ENV="development"
VUE_APP_BASE_URL="本地环境域名"

四、项目配置

从 vue-cli3.0 开始 build 和 config 目录就取消了,如果需要修改配置,可以在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置,因为项目的配置比较多,这里就不分别介绍了,可以 访问官方文档

五、项目迁移

剩下的就是比较简单的工作了,因为 2.0/3.0/4.0 的src目录是基本一致的,所以照着原来的项目搬进来就可以了

唯一需要注意的就是路径的问题了

结束语

本来,这个文章真的是为了从 2.0 迁移到 3.0 的,没想到 4.0 都发布了,那刚好迁移到 4.0 得了

文章标题我会修改为 4.0,但是文章内可能还会有 3.0 我就不修改了

一是证明我的最初想法,二是感慨前端的发展速度!

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

Javascript 相关文章推荐
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
小程序自定义轮播图圆点组件
Jun 25 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 #Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 #jQuery
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 #Javascript
Vue实现base64编码图片间的切换功能
Dec 04 #Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 #Javascript
Vue实现图片与文字混输效果
Dec 04 #Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 #Javascript
You might like
php 传值赋值与引用赋值的区别
2010/12/29 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
jquery.validate使用攻略 第三部
2010/07/01 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
详解python中的json和字典dict
2018/06/22 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
python编写实现抽奖器
2020/09/10 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
同程旅游英文网站:LY.com
2018/11/13 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
党日活动总结
2014/05/07 职场文书
受伤赔偿协议书
2014/09/24 职场文书
售后服务承诺函格式
2015/01/21 职场文书
后勤个人工作总结
2015/02/28 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
MySQL系列之十二 备份与恢复
2021/07/02 MySQL