vue-cli 3.0.x使用步奏详解

php中世界最好的语言
Lepaskan: 2018-05-25 14:05:26
asal
1159 orang telah melayarinya

这次给大家带来vue-cli 3.0.x使用步奏详解,vue-cli 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
Salin selepas log masuk

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

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

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
Salin selepas log masuk

2. 指定配置启动

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

"dev-build": "vue-cli-service build --mode development",
Salin selepas log masuk

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

配置文件内容格式如下 ,

 VUE_APP_*
Salin selepas log masuk

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

VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'
Salin selepas log masuk

4. 调整用环境配置

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

如何开发一个自定义库

如何使用JS实现合并多个数组去重算

Atas ialah kandungan terperinci vue-cli 3.0.x使用步奏详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan