浅谈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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
运算符&&的三个不同层次
Apr 07 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
vue组件间的参数传递实例详解
Apr 26 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 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
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
js 提交和设置表单的值
2008/12/19 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Python 文件数据读写的具体实现
2020/01/24 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
python GUI模拟实现计算器
2020/06/22 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
高级Java程序员面试要点
2013/08/02 面试题
贺卡寄语大全
2014/04/11 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
2014年业务工作总结
2014/11/17 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
中秋节慰问信
2015/02/15 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python
python数字类型和占位符详情
2022/03/13 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis