浅谈vue-cli 3.0.x 初体验


Posted in Javascript onApril 11, 2018

最近项目正在优化。乘着有时间看了一下 vue-cli3.0.x 使用 。感觉还蛮不错的。 因为之前项目使用的 vue-cli 2 创建的,强行使用 eslint让我们很难受,一些与项目无关的 “build” 和 “config” ,让人看着就有一些不爽 。由于公司环境比较多,需要测试环境的配置。增加了 “”tt”: “node build/tt-build.js”” 。到 3.0.x 应该怎么用? 带着这些问题来看 3.0.x 感觉就好多了。

1. 官网资料

在学习技术的时候,经常看查看官网的资料。因为那里的资料更新是最快的 。
vue-cli
vue-cli 文档

2. 安装环境

这里犸特头,推荐大家使用 npm install -g @vue/cli ,通过 yarn global add @vue/cli 还需要进行其他设置,还生成一些文件删除几分钟。

npm install -g @vue/cli
# or
yarn global add @vue/cli
# 使用vue命令,创建项目(不同于cli2.0的init,create)
vue create my-project

如果 您使用 yarn global add @vue/cli 安装需要 进入 目录 。执行

yarn // 安装项目依赖
cd packages/@vue/cli // 目录
yarn link //添加 link `vue` 执行指命 。
vue create my-project // 创建项目 。

3. 多环境配置

因为公司有 开发环境 ,测试环境,联调环境,线上环境 。减少人为配置,一次配置对原则。所以在2.0.x 增加了“package.json “tt”: “node build/tt-build.js”” 类型的配置,配置不了不少文件。 在 vue-cli 3.0.x 里面支持 “.env” 文件配置 ,我这里增加 “.env.development” , “.env.production”和“.env.test” 配置 。

1. 基本对应和默认

development is used by vue-cli-service serve
  production is used by vue-cli-service build
  test is used by vue-cli-service test

2. 指定配置启动

增加其他配置,需要下面指定配置 。

"dev-build": "vue-cli-service build --mode development",

3.”.env “配置文件编写

配置文件内容格式如下 ,

VUE_APP_*

例如:”.env.production” 内容如下

VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'

4. 调整用环境配置

console.log(process.env.VUE_APP_MOCK_URL);
process.env.NODE_ENV // 特定
BASE_URL // vue.config.js 配置

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

Javascript 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 Javascript
js基于canvas实现时钟组件
Feb 07 Javascript
vue 组件高级用法实例详解
Apr 11 #Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 #Javascript
React如何避免重渲染
Apr 10 #Javascript
vue select组件的使用与禁用实现代码
Apr 10 #Javascript
vue 自定义 select内置组件
Apr 10 #Javascript
JavaScript如何对图片进行黑白化
Apr 10 #Javascript
axios 处理 302 状态码的解决方法
Apr 10 #Javascript
You might like
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
详解js类型判断
2018/05/22 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python根据url地址下载小文件的实例
2018/12/18 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
python实现无边框进度条的实例代码
2020/12/30 Python
复古服装:RetroStage
2019/05/10 全球购物
高中生学习生活的自我评价
2013/11/27 职场文书
业务员简历自我评价
2014/03/06 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang