Explication détaillée des étapes pour utiliser vue-cli 3.0.x

Cette fois, je vais vous apporter un guide détaillé étape par étape pour utiliser vue-cli 3.0.x Quelles sont les précautions lors de l'utilisation de vue-cli 3.0.x. Voici des cas pratiques, jetons un coup d'oeil.

1. Informations sur le site officiel

Lorsque vous apprenez la technologie, vérifiez toujours les informations du site officiel. Parce que les informations y sont mises à jour le plus rapidement.
vue-cli
documentation vue-cli

2 InstallationEnvironnement

Voici l'en-tête spécial, il est recommandé. que vous utilisez npm install -g @vue/cli, via fil global add @vue/cli, d'autres paramètres doivent être définis et certains fichiers sont générés supprimé pendant quelques minutes.

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

Si vous utilisez fil global add @vue/cli pour installer, vous devez entrer dans le répertoire. Exécuter

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

3. Configuration multi-environnement

Parce que l'entreprise dispose d'un environnement de développement, d'un environnement de test, d'un environnement de débogage commun et d'un environnement en ligne. Réduisez la configuration manuelle et configurez-la une fois. Par conséquent, le type de configuration "package.json "tt": "node build/tt-build.js"" a été ajouté dans la version 2.0.x et de nombreux fichiers n'ont pas pu être configurés. Dans vue-cli 3.0.x, la configuration du fichier ".env" est prise en charge ici. J'ai ajouté les configurations ".env.development", ".env.production" et ".env.test".

1. Correspondance de base et par défaut

  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. Commencez par spécifier la configuration

Pour ajouter d'autres configurations, vous devez spécifier la configuration ci-dessous.

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

3.".env "Fichier de configurationÉcrire

Le format du contenu du fichier de configuration est le suivant,

 VUE_APP_*

Par exemple : le contenu de ".env .production" est le suivant

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

4. Ajustez la configuration de l'environnement

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans ce cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres sujets connexes dans l'article du site Web PHP chinois !

Lecture recommandée :

Comment développer une bibliothèque personnalisée

Comment utiliser JS pour fusionner plusieurs tableaux pour le recalcul

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!