浅谈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 相关文章推荐
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
bootstrap Table实现合并相同行
Jul 19 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
php随机抽奖实例分析
2015/03/04 PHP
PHP实现文件上传与下载
2020/08/28 PHP
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
node.js通过url读取文件
2020/10/16 Javascript
Python TestCase中的断言方法介绍
2019/05/02 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
采购部岗位职责
2013/11/24 职场文书
法学函授自我鉴定
2014/02/06 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
投资合作协议书范本
2014/04/17 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
2014年政教处工作总结
2014/12/20 职场文书
三峡导游词
2015/01/31 职场文书
2015年售票员工作总结
2015/04/29 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python