Ein auf Vue basierendes E-Commerce-Backend-Managementsystem, das ein Entwicklungsmodell mit Front-End- und Back-End-Trennung verwendet. Zu den im Projekt verwendeten Front-End-Technologie-Stacks gehören Vue, Vue-Router, Element-UI, Axios, Echarts usw.
Front-End-Technologie-Stack:
Nachdem sich der Benutzer erfolgreich angemeldet hat, merkt sich der Client seinen Anmeldestatus und behält ihn über sessionStorage
und token
bei.
Steuern Sie Benutzerzugriffsberechtigungen über Route Navigation Guard router.beforeEach
. Verhindern Sie, dass nicht angemeldete Benutzer versuchen, über die URL auf andere Seiten als die Anmeldeseite zuzugreifen.
Element-UI
Komponentenbibliothek.<el-menu>
, um die seitliche Navigationsleiste zu implementieren, und fügen Sie das Attribut „activePath“ zu sessionStorage
hinzu, damit die Navigationsleiste hervorgehoben bleibt.Iconfont
Alibaba.Axios
an und fügen Sie dem Axios-Request-Interceptor ein Token hinzu, um die Berechtigung zum Abrufen von Daten sicherzustellen.NProgress
Fortschrittsbalken, um den Fortschritt beim Laden der Seite (Datenanforderung) anzuzeigen. Verwenden Sie <el-form>
, um Benutzerformulare hinzuzufügen, Formularüberprüfungsregeln anzupassen und das Zurücksetzen und Vorüberprüfen des Formulars vor der Übermittlung zu implementieren.
Verwenden Sie slot-scope
um Komponentendaten abzurufen und Rendering-Vorlagen anzupassen.
Rollenliste
Verwenden Sie eine dreischichtige v-for
Schleife, um die Berechtigungen der ersten, zweiten und dritten Ebene der Rolle darzustellen.
Verwenden Sie das <el-tree>
-Baumsteuerelement, um eine Liste der rollenzuweisbaren Berechtigungen anzuzeigen.
Berechtigungsliste
Produktliste
Vue.filter
um das Anzeigeformat von Date-Objekten anzupassen.Produkt hinzufügen
Verwenden Sie die Schrittleistenkomponente <el-steps>
, um Benutzer beim Ausfüllen des Formulars zum Hinzufügen von Produkten entsprechend dem Prozess anzuleiten.
Verwenden Sie die Komponente <el-upload>
, um Benutzern das Hochladen von Produktbildern zu ermöglichen.
Verwenden Sie vue-quill-editor
um Benutzern das Ausfüllen von Produktinhalten zu ermöglichen.
Verwenden Sie <el-form>
, um das Formular zum Hinzufügen von Produkten auszufüllen, die Formularüberprüfungsregeln anzupassen und eine Vorüberprüfung vor dem Absenden des Formulars durchzuführen.
Klassifizierungsparameter
Produktklassifizierung
vue-table-with-tree-grid
um die Produktklassifizierung der ersten, zweiten und dritten Ebene anzuzeigen. Verwenden Sie die Timeline-Komponente <el-timeline>
, um die Logistikinformationen der Bestellung anzuzeigen.
Verwenden Sie Echarts
, um Benutzerquelldatenberichte anzuzeigen.
- axios => Anfrage senden
- echarts => Diagramme
- element-ui => Element-UI-Komponentenbibliothek
- lodash => Deep Copy und Objektzusammenführung
- nprogress => Fortschrittsbalken
- vue-quill-editor => Rich-Text-Editor
- vue-table-with-tree-grid => Baumtabelle
- babel => ES6-Syntaxkonvertierung
- eslint/babel-eslint => Syntaxprüfung
- sass/sass-loader => Sass-Syntax
- babel-plugin-transform-remove-console => Konsole aus der Produktionsumgebung entfernen
- @babel/plugin-syntax-dynamic-import => Verzögertes Laden von Routen
Sehen Sie sich Paketierungsberichte über das Vue-UI-Visualisierungspanel an und analysieren Sie, wie zu große Dateien optimiert/komprimiert werden können.
Geben Sie über chainWebpack
unterschiedliche Verpackungseintragsdateien für den Entwicklungsmodus und den Release-Modus an
- Entwicklungsmodus-Eintragsdatei src/main-dev.js
- Freigabemodus-Eintragsdatei src/main-prod.js
In der Produktionsumgebung werden einige zu große Bibliotheken von Drittanbietern über CDN
Standardmäßig werden über die Importsyntax importierte Abhängigkeitspakete von Drittanbietern schließlich gepackt und in derselben Datei zusammengeführt, was zu dem Problem führt, dass die einzelne Datei nach erfolgreicher Verpackung zu groß ist.
Um die oben genannten Probleme zu lösen, können Sie die Abhängigkeiten konfigurieren, die zum Laden externer CDN-Ressourcen über den
externals
-Knoten von Webpack erforderlich sind. Alle in Externals deklarierten Abhängigkeitspakete von Drittanbietern werden nicht gepackt.
Passen Sie den Homepage-Inhalt verschiedener Umgebungen über Plug-Ins an (verwenden Sie beispielsweise Import, um abhängige Pakete im Entwicklungsmodus zu importieren, und verwenden Sie CDN, um im Release-Modus zu importieren).
// Vue.config.js
config . plugin ( 'html' ) . tap ( args => {
args [ 0 ] . isProd = true / false
return args
} )
<!-- index.html -->
< title > < %= htmlWebpackPlugin.options.isProd ? '' : 'dev-' % > Element后台管理系统</ title >
< % if(htmlWebpackPlugin.options.isProd) { % >
此处为CDN引入的第三方资源
< % } % >
Beim Packen von Projekten wirken sich zu große JS-Pakete auf die Seitenladegeschwindigkeit aus.
Verwenden Sie
@babel/plugin-syntax-dynamic-import
und ändern Sie das Routing so, dass es bei Bedarf geladen wird. Die entsprechende Komponente wird erst geladen, wenn auf die Route zugegriffen wird.
npm install
npm run serve
npm run build
npm run lint