Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der Schritte zur Verwendung von vue-cli 3.0.x

php中世界最好的语言
Freigeben: 2018-05-25 14:05:26
Original
1142 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von vue-cli 3.0.x ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von vue-cli 3.0.x ein Blick.

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
Nach dem Login kopieren

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 // 创建项目 。
Nach dem Login kopieren

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
Nach dem Login kopieren

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",
Nach dem Login kopieren

3.".env "KonfigurationsdateiSchreiben

Das Inhaltsformat der Konfigurationsdatei ist wie folgt:

 VUE_APP_*
Nach dem Login kopieren

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

VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'
Nach dem Login kopieren

4. Passen Sie die Umgebungskonfiguration an

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

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 entwickeln Sie eine benutzerdefinierte Bibliothek

So verwenden Sie JS, um mehrere Arrays zur Neuberechnung zusammenzuführen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von vue-cli 3.0.x. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!