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!
