Detailed explanation of the steps to use vue-cli 3.0.x

This time I will bring you a detailed explanation of the steps for using vue-cli 3.0.x. What are the precautions for using vue-cli 3.0.x? Here are actual cases, let’s take a look.

1. Official website information

When learning technology, always check the official website information. Because the information there is updated the fastest.
vue-cli
vue-cli Document

2. InstallationEnvironment

Here is the special header, it is recommended that you use npm install -g @vue/cli, through yarn global add @vue/cli, other settings need to be made, and some files are generated Delete for a few minutes.

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

If you use yarn global add @vue/cli to install, you need to enter the directory. Execution

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

3. Multi-environment configuration

Because the company has a development environment, a test environment, a joint debugging environment, and an online environment. Reduce manual configuration and configure it once. Therefore, the "package.json "tt": "node build/tt-build.js"" type of configuration was added in 2.0.x, and many files could not be configured. In vue-cli 3.0.x, ".env" file configuration is supported. I have added ".env.development", ".env.production" and ".env.test" configurations here.

1. Basic correspondence and default

  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. Start by specifying configuration

To add other configurations, you need to specify the configuration below.

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

3.”.env “Configuration fileWriting

The content format of the configuration file is as follows,

 VUE_APP_*

For example: “.env.production” content As follows

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

4. Adjust the environment configuration

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to develop a custom library

How to use JS to merge multiple arrays for recalculation

The above is the detailed content of Detailed explanation of the steps to use vue-cli 3.0.x. For more information, please follow other related articles on the PHP Chinese website!