浅谈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 相关文章推荐
Js的MessageBox
Dec 03 Javascript
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 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
我的论坛源代码(二)
2006/10/09 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
JS实现百度搜索框
2021/02/25 Javascript
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python 变量类型详解
2018/10/10 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
浅析python中while循环和for循环
2019/11/19 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
大学生实习感言
2014/01/16 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python