Detaillierte Einführung in vue-cli 3.0.x

Dieses Mal bringe ich Ihnen eine detaillierte Einführung in vue-cli 3.0.x. Was sind die Vorsichtsmaßnahmen bei der Verwendung von vue-cli 3.0.x?

Das Projekt wird kürzlich optimiert. Als ich Zeit hatte, habe ich mir die Verwendung von vue-cli3.0.x angesehen. Es fühlt sich ziemlich gut an. Da das vorherige Projekt mit vue-cli 2 erstellt wurde, fühlten sich die Leute unwohl, wenn wir gezwungen wurden, eslint zu verwenden. Einige „Builds“ und „Configs“ hatten nichts mit dem Projekt zu tun. Da es viele Unternehmensumgebungen gibt, ist die Konfiguration der Testumgebung erforderlich. „tt“: „node build/tt-build.js“ hinzugefügt. Wie soll ich es auf 3.0.x verwenden? Es fühlt sich viel besser an, 3.0.x mit diesen Problemen im Hinterkopf zu betrachten.

1. Offizielle Website-Informationen

Überprüfen Sie beim Erlernen von Technologie immer die offiziellen Website-Informationen. Weil die Informationen dort am schnellsten aktualisiert werden.
vue-cli
vue-cli-Dokumentation

2. InstallationUmgebung

Hier ist der spezielle Header, er wird empfohlen Wenn Sie npm install -g @vue/cli verwenden und über Yarn Global @vue/cli hinzufügen, müssen andere Einstellungen vorgenommen werden und einige Dateien werden für einige Minuten löschen generiert.

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

Wenn Sie Yarn Global Add @vue/cli zur Installation verwenden, müssen Sie das Verzeichnis eingeben. Führen Sie

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

3 aus. Multi-Umgebungskonfiguration

Da das Unternehmen über eine Entwicklungsumgebung, eine Testumgebung, eine gemeinsame Debugging-Umgebung und eine Online-Umgebung verfügt. Reduzieren Sie die manuelle Konfiguration und konfigurieren Sie sie einmal. Daher wurde in 2.0.x der Konfigurationstyp „package.json „tt“: „node build/tt-build.js““ hinzugefügt und viele Dateien konnten nicht konfiguriert werden. In vue-cli 3.0.x wird die Dateikonfiguration „.env“ unterstützt. Ich habe hier die Konfigurationen „.env.development“, „.env.produktion“ und „.env.test“ hinzugefügt.

1. Grundlegende Korrespondenz und Standard

  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. Beginnen Sie mit der Angabe der Konfiguration

Um weitere Konfigurationen hinzuzufügen, müssen Sie die Konfiguration unten angeben.

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

3.".env "KonfigurationsdateiSchreiben

Das Inhaltsformat der Konfigurationsdatei ist wie folgt:

 VUE_APP_*

Zum Beispiel: „ .env.produktion“-Inhalt Wie folgt

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

4. Passen Sie die Umgebungskonfiguration an

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

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So deduplizieren Sie Daten beim Zusammenführen mehrerer Arrays

Was zur Bestimmung des Typs und der Größe benötigt wird der hochgeladenen Bilder Schritte

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in vue-cli 3.0.x. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!