Vue template web

Vue-template-web ist eine einfache Homepage-Vorlage, die Vue Element-UI verwendet

Einführung:

Bei diesem Projekt handelt es sich um eine einfache Vorlagenseite und Grundstruktur, die leicht in einige Werbeseiten, Themenseiten, offizielle Website-Seiten usw. umgewandelt werden kann.

Projektumsetzung:

1. Zwei-Wege-Bindungs-Scroll-Ankerseite.
2. i8n-Internationalisierungsunterstützung von vue element-ui.
3. Ändern Sie das Farbthema des Themas.
4. Vuex speichert dauerhaft das vom Benutzer ausgewählte Thema und die ausgewählte Sprache.
5. Verwendete die Iconfont-Schriftart-Icon-Bibliothek.
6. Kapselt eine Axios-Anfrage.

Projektstruktur:

 src
 ├─assets                静态资源,图片,iconfont图标字体存放目录
 ├─components            公共组件目录
 ├─i18n                  vue element-ui的i8n国际化支持
 ├─router                路由模块
 ├─store                 vuex的模块,公共的state, mutations方法
 ├─utils                 工具类模块,包含http,本地缓存等.
 ├─views                 各个page页面的存放目录
 ├─App.vue               入口组件,挂载入口
 └─main.js               main入口js文件,引入全局使用的库、公共的样式和方法

Darstellung:

So führen Sie aus:

-.Klonen Sie das Projekt ( git clone https://github.com/pjqdyd/Vue-template-web.git ).

-. Führen Sie npm install aus, um Abhängigkeiten herunterzuladen (wenn der Download langsam ist: npm install --registry=https://registry.npm.taobao.org ).

-. Führen Sie npm run serve aus, um das Projekt zu starten, und besuchen Sie http://localhost:8080 um die Seite zu durchsuchen.

-.Führen Sie npm run build aus, um das Projekt zu kompilieren und zu verpacken.

Beachten:

1. Der neue Zweig Vue-template-web-cdn verwendet CDN, um einige Abhängigkeiten zu laden, wodurch verhindert wird, dass die js-Datei nach dem Packen zu groß wird und das Laden des ersten Bildschirms zu lange dauert.

Getestet:

 master分支运行npm run build后dist文件夹大小为_4M_左右;

Vue-template-web-cdn分支打包后的dist文件夹减少至_100kb_左右;

Daher wird empfohlen, den Zweig Vue-template-web-cdn zu verwenden.

2. Achten Sie nach der Optimierung des Scrollens mithilfe des Ankerpunkts window.scrollTo(options) auf die Browserkompatibilität: window.scrollTo ist kompatibel. Natürlich können Sie die vorherige Übermittlungsversion auswählen, um mit anderen Browsern kompatibel zu sein.

Hinweis:

1. Das Projekt implementiert die vue element-ui i8n-Internationalisierung und definiert zwei Sprachgruppen, die unter i18n/langs/ definiert sind.

2. Implementierung der Themenänderung:

Zuvor wurde es unter Bezugnahme auf den offiziellen Skin-Änderungsfall implementiert. Die Farbe kann zusammen mit den Komponenten von ElementUI geändert werden. Da diese Methode umständlicher ist und unbekannte Fehler verursachen kann, verwenden wir derzeit das direkte Speichern eines Farbwerts, um das Thema zu ändern und übergeben Sie this.$ im Projekt store.state.theme, um den Farbwert des Themas abzurufen.
(Empfehlenswerter: Sie können CSS-Variablen verwenden, um sie an das Stammelement zu binden und den Stil zu ändern.)

3. Das Scrollen mit dem Seitenanker bezieht sich auf dieses Open-Source-Projekt.

4. Das Projekt kapselt die Axios-Anforderung und bindet das globale Attribut $globalRequest. Sie können die asynchrone Anforderungsmethode test4() auf jeder Seite aufrufen, indem Sie dies erwarten.$globalRequest.test4(arg); siehe Code.

5. Wenn das Projekt Bereiche findet, die verbessert werden können, können Sie gerne ein Problem zur Verbesserung ansprechen.