vue element ui scaffold webpack4
1.0.0
Es wurde auf webpack5 aktualisiert . Wenn Sie webpack4 verwenden müssen, können Sie den Zweig wechseln: git checkout webpack4 .
**vue3 + element-ui + webpack5 Version: umschaltbarer Zweig: git checkout vue3 **
Bei diesem Projekt handelt es sich um ein mehrseitiges Gerüstprojekt mit mehreren Umgebungen, das Element-Plus unter Vue verwendet und auf Webpack5 basiert.
Projekteffektvorschau 1 Projekteffektvorschau 2
git clone https://github.com/hzsrc/vue-element-ui-scaffold-webpack4.git
# git checkout vue3
cd vue-element-ui-scaffold-webpack4
npm install
Schnellere Build-Geschwindigkeit und kleinere Paketdateigröße.
Zwei Möglichkeiten zur automatischen Ausgabe von HTML-Seitendateien (implementiert durch das HTML-Webpack-Plugin):
Während der Entwicklung können Sie SVG-Dateien im Verzeichnis src/iconfont/svgs ändern oder hinzufügen oder löschen, um automatisch Schriftartsymbole zu generieren (unterstützt ttf, woff2, woff, eot, svg) und gleichzeitig CSS-Stile und HTML-Vorschauen zu unterstützen ist sofort sichtbar. Sie können die Wirkung sehen. Sie können diese Dateien auch manuell mit npm run build-font generieren. Es ist nicht erforderlich, manuell zu icomoon.io oder iconfont.cn zu gehen, um Schriftartsymbole, CSS und Symbolvorschauen zu generieren und zu ändern. Implementiert basierend auf webpack-iconfont-plugin-nodejs.
Das Projekt kann Dynamic-Mocker als Datensimulation der Back-End-Schnittstelle verwenden. Die Simulationsdaten befinden sich im Mock-Ordner und werden mithilfe von JS-Dateien implementiert, was leicht verständlich, bequem und flexibel ist.
Aktivierungsmethode: 1. npm run dev startet standardmäßig gleichzeitig den Mock-Service. 2. Allein ausführen: NPM Run Mock.
Konfigurationsdatei: 1. Die Schnittstellendienstadresse in config/serverMap.js lautet: base: „//localhost:8085“ 2. Die Datei „mock/mock-config.js“ konfiguriert verschiedene Parameter des Mock.
Die Quelle des CSS-On-Demand-Ladens verweist direkt auf die SCSS-Datei von Element-Plus, nicht auf die vorkompilierte CSS-Datei. Hängen Sie die Datei src/assets/css/element-theme/theme-changed.scss zur Kompilierungszeit über das Plugin „join-file-content-plugin“ an die Element-Plus-Designvariablendatei theme-chalk/src/common/var.scss an Es ist möglich, den Effekt sofort nach der Änderung der SCSS-Variablen anzuzeigen, ohne die Element-Plus-SCSS-Datei vorab in eine CSS-Datei zu kompilieren. Gleichzeitig können die SCSS-Variablen von element-plus überall im Projekt referenziert werden.
Verwenden Sie das Plug-In „webpack-theme-color-replacer“, um beim Erstellen des Webpacks die Stilregeln mit den Designfarben im CSS zu extrahieren und eine Datei „css/theme-colors.css“ zu generieren. Wenn die Webseite dann ausgeführt wird, laden Sie diese CSS-Datei herunter und ersetzen Sie die darin enthaltenen Farben dynamisch durch die benutzerdefinierte Designfarbe. Da nur das farbbezogene CSS extrahiert wird, ist die Geschwindigkeit viel schneller als beim Herunterladen des gesamten CSS von Element-Plus. Und nicht nur Element-Plus-Stile, sondern auch die Themenfarben selbst geschriebener Stile im Projekt können ersetzt werden.
Beim Veröffentlichen von Code werden Quellcode-Zuordnungsdateien in einem einheitlichen Quellcode-Zuordnungsordner generiert und automatisch in der Testumgebung zugeordnet. Aus Gründen der Codesicherheit führt die Produktionsumgebung keine automatische Zuordnung durch. Wenn ein Debuggen erforderlich ist, unterstützt Chrome die manuelle Zuordnung des Quellcodes über die URL. Gemäß den Sicherheitsanforderungen ist dieser Ordnername für die Quellcodezuordnung ein Ordnername, den nur Entwickler kennen. Oder verwenden Sie einen dynamischen Verschlüsselungsalgorithmus, um diesen Ordnernamen zu generieren. Oder platzieren Sie diese Quellcode-Zuordnungsdateien im Website-Verzeichnis, für das eine Anmeldebestätigung erforderlich ist. Bitte ändern Sie den Namen des Verzeichnisses in der Funktion getSourceMapPath der Datei config/index.js nach Bedarf. Wenn ein Fehler auftritt und ein Online-Debugging erforderlich ist, kann auf diese Weise die Quellcodezuordnung schnell und manuell hinzugefügt werden, um das Debuggen zu erleichtern, und Quellcodelecks werden vermieden.
Verwenden Sie die einfache Lösung von vw+rem, um ein responsives Layout zu implementieren. Verwenden Sie das Plug-In „postcss-pxtorem“, um die Einheit in CSS automatisch von px in rem zu konvertieren. Während der Entwicklung wird px weiterhin als CSS-Längeneinheit verwendet. 1rem = 100px, beim Debuggen einfach zu konvertieren. Gemeinsam für PC und mobile Endgeräte (es ist am besten, element-plus durch andere UI-Frameworks für mobile Endgeräte zu ersetzen).
Kompatibel mit IE10 und höher, Chrome, Firefox, Safari, QQ, 360, 2345 und anderen Browsern. Wenn Sie zur mobilen Version wechseln müssen, ändern Sie bitte .browsersrc in die mobile Version.
npm run dev
Lokale Entwicklung und Debugging. Verwenden Sie die von dev in config/serverMap.js konfigurierte Back-End-Schnittstellendienstadresse.
npm run build-test
Wird für die Bereitstellung einer Testumgebung verwendet. js hat eine Quellcodezuordnung, CSS hat keine Quellcodezuordnung. Verwenden Sie die von test in config/serverMap.js konfigurierte Schnittstellendienstadresse.
npm run build
Für die Bereitstellung in der Produktionsumgebung. Verwenden Sie die von prod in config/serverMap.js konfigurierte Schnittstellendienstadresse.
npm run build-demo
Die Konfiguration ist dieselbe wie in der Produktionsumgebung, nur die Schnittstellendienstadresse ist unterschiedlich. Verwenden Sie die von der Demo in config/serverMap.js konfigurierte Schnittstellendienstadresse.
npm run build-dev
Wird zum Veröffentlichen und Bereitstellen auf dem Entwicklungsumgebungsserver verwendet und eignet sich für Situationen, in denen zum Debuggen eine Veröffentlichung auf dem Server erforderlich ist. Verwenden Sie die von dev in config/serverMap.js konfigurierte Schnittstellendienstadresse.
npm run build-preview
Statische Scheindaten werden aktiviert, es ist kein Back-End-Dienst erforderlich und Scheindaten werden zur Simulation von Ajax-Aufrufen verwendet (vorausgesetzt, die entsprechende API-Schnittstelle hat Scheindaten geschrieben). Entspricht npm run build --preview && npm run play-dist .
npm run play-dist
Starten Sie mit dem Dist-Verzeichnis als Stammverzeichnis einen lokalen statischen HTTP-Dienst, um die laufenden Ergebnisse des Dist-Verzeichnisses nach der Veröffentlichung anzuzeigen.
npm run mock
Wenn der Back-End-Schnittstellendienst noch nicht abgeschlossen ist, kann er zur Simulation der Back-End-Schnittstellendaten zum Debuggen der Front-End-Funktion verwendet werden.
npm run proxy80
Durch Proxying des vorhandenen Ports (Port 80xx) auf Port 80 oder Port 443 kann der Port beim Zugriff ausgeblendet werden und auch ein https-Zugriff erreicht werden. In Kombination mit den Systemhosts und der Konfiguration von 127.0.0.1 als angegebenem Domänennamen können Sie den Domänennamen direkt verwenden, um auf die lokale Debugging-Seite zuzugreifen, die zum Debuggen einiger Szenarien verwendet wird, in denen der Domänennamenzugriff verwendet werden muss (z. B. Debuggen von WeChat, Einzelheiten finden Sie unter: https://www.cnblogs.com/hz -blog/p/wechat-local-debug-domain.html).
