Vue template web

Vue-template-web est un modèle de page d'accueil simple utilisant vue element-ui

Introduction:

Ce projet est une simple page modèle et une structure de base, qui peut être facilement transformée en pages promotionnelles, pages thématiques, pages de sites Web officiels, etc.

Mise en œuvre du projet :

1. Page d'ancrage à défilement à reliure bidirectionnelle.
2. Prise en charge de l'internationalisation i8n de vue element-ui.
3. Modifiez le thème de couleur du thème.
4. Vuex met en cache de manière persistante le thème et la langue sélectionnés par l'utilisateur.
5. Utilisé la bibliothèque d'icônes de police iconfont.
6. Encapsule une requête axios.

Structure du projet :

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

Rendu :

Comment exécuter :

-.Clonez le projet ( git clone https://github.com/pjqdyd/Vue-template-web.git ).

-. Exécutez npm install pour télécharger les dépendances (si le téléchargement est lent : npm install --registry=https://registry.npm.taobao.org ).

-. Exécutez npm run serve pour démarrer le projet et visitez http://localhost:8080 pour parcourir la page.

-.Exécutez npm run build pour compiler et empaqueter le projet.

Avis:

1. La nouvelle branche Vue-template-web-cdn utilise CDN pour charger certaines dépendances, empêchant le fichier js d'être trop volumineux après l'empaquetage et le premier écran de prendre trop de temps à charger.

Testé :

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

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

Il est donc recommandé d'utiliser la branche Vue-template-web-cdn ;

2. Après avoir optimisé le défilement à l'aide du point d'ancrage window.scrollTo(options), faites attention à la compatibilité du navigateur : window.scrollTo est compatible. Bien entendu, vous pouvez choisir la version de soumission précédente pour être compatible avec les autres navigateurs ;

indice:

1. Le projet implémente l'internationalisation de vue element-ui i8n. La commutation entre le chinois et l'anglais définit deux ensembles de langues, qui sont définies sous i18n/langs/.

2. Mise en œuvre du changement de thème :

Auparavant, il était implémenté en référence au cas de changement de skin officiel. La couleur peut être modifiée avec les composants d'ElementUI. Étant donné que cette méthode est plus lourde et peut provoquer des bugs inconnus, nous utilisons actuellement l'enregistrement direct d'une valeur de couleur pour changer le thème. , et transmettez this.$ dans le projet store.state.theme peut obtenir la valeur de couleur du thème.
(Plus recommandé : vous pouvez utiliser des variables CSS var pour vous lier à l'élément racine afin de modifier le style).

3. Le défilement de l'ancre de page fait référence à ce projet open source.

4. Le projet encapsule la requête axios et lie l'attribut global $globalRequest. Vous pouvez appeler la méthode de requête asynchrone test4() sur n'importe quelle page via wait this.$globalRequest.test4(arg);

5. Si le projet trouve des domaines qui peuvent être améliorés, vous êtes invités à soulever une question à améliorer.