vue element ui scaffold webpack4
1.0.0
Il a été mis à niveau vers webpack5 . Si vous devez utiliser webpack4, vous pouvez changer de branche : git checkout webpack4 .
**version vue3 + element-ui + webpack5 : branche commutable : git checkout vue3 **
Ce projet est un projet d'échafaudage de plusieurs pages et multi-environnements qui utilise element-plus sous Vue et est construit sur la base de webpack5.
Aperçu de l'effet de projet 1 Aperçu de l'effet de projet 2
git clone https://github.com/hzsrc/vue-element-ui-scaffold-webpack4.git
# git checkout vue3
cd vue-element-ui-scaffold-webpack4
npm install
Vitesse de construction plus rapide et taille de fichier de package plus petite.
Deux façons de générer automatiquement des fichiers de pages HTML (implémentées par html-webpack-plugin) :
Pendant le développement, modifiez ou ajoutez ou supprimez des fichiers svg dans le répertoire src/iconfont/svgs pour générer automatiquement des icônes de police (prenant en charge ttf, woff2, woff, eot, svg) et prenant en charge les styles css et les aperçus html en même temps, rechargement à chaud ; est immédiat. Vous pouvez voir l'effet. Vous pouvez également utiliser npm run build-font pour générer ces fichiers manuellement. Il n'est pas nécessaire d'accéder manuellement à icomoon.io ou iconfont.cn pour générer et modifier les icônes de police, les CSS et les aperçus d'icônes. Implémenté sur la base de webpack-iconfont-plugin-nodejs.
Le projet peut utiliser Dynamic-Mocker comme simulation de données de l'interface back-end. Les données de simulation se trouvent dans le dossier mock et sont implémentées à l'aide de fichiers js, faciles à comprendre, pratiques et flexibles.
Méthode d'activation : 1. npm run dev démarrera le service fictif en même temps par défaut. 2. Exécuter seul : npm run mock.
Fichier de configuration : 1. L'adresse du service d'interface dans config/serverMap.js est : base : '"//localhost:8085"' 2. Le fichier mock/mock-config.js configure divers paramètres du mock.
La source du chargement CSS à la demande pointe directement vers le fichier scss d'element-plus, et non vers le fichier CSS précompilé. Ajoutez le fichier src/assets/css/element-theme/theme-changed.scss au fichier de variables de thème element-plus theme-chalk/src/common/var.scss au moment de la compilation via le plugin join-file-content-plugin . Il est possible de visualiser l'effet immédiatement après avoir modifié la variable scss sans pré-compiler le fichier scss element-plus dans un fichier css. Dans le même temps, les variables scss d'element-plus peuvent être référencées n'importe où dans le projet.
Utilisez le plug-in webpack-theme-color-replacer pour extraire les règles de style contenant les couleurs du thème dans le CSS lors de la création du webpack et générer un fichier css/theme-colors.css. Ensuite, lorsque la page Web est en cours d'exécution, téléchargez ce fichier CSS et remplacez dynamiquement les couleurs qu'il contient par la couleur du thème personnalisé. Étant donné que seuls les CSS liés aux couleurs sont extraits, la vitesse est beaucoup plus rapide que le téléchargement de l'intégralité du CSS d'Element-Plus. Et non seulement les styles d'éléments plus, mais également les couleurs de thème des styles auto-écrits dans le projet peuvent être remplacés.
Lors de la publication du code, les fichiers de mappage de code source sont générés dans un dossier de mappage de code source unifié et automatiquement mappés dans l'environnement de test. Pour des raisons de sécurité du code, l'environnement de production n'effectue pas de mappage automatique si le débogage est requis, Chrome prend en charge le mappage manuel du code source via l'URL. Selon les exigences de sécurité, ce nom de dossier de mappage de code source est un nom de dossier que seuls les développeurs connaissent. Ou utilisez un algorithme de cryptage dynamique pour générer ce nom de dossier. Ou placez ces fichiers de mappage de code source dans le répertoire du site Web qui nécessite une vérification de connexion. Veuillez modifier le nom du répertoire dans la fonction getSourceMapPath du fichier config/index.js si nécessaire. De cette façon, lorsqu'un bug se produit et qu'un débogage en ligne est requis, le mappage du code source peut être ajouté rapidement et manuellement pour faciliter le débogage, et les fuites de code source sont évitées.
Utilisez la solution simple de vw+rem pour implémenter une mise en page réactive. Utilisez le plug-in postcss-pxtorem pour convertir automatiquement l'unité en CSS de px en rem. Pendant le développement, px est toujours utilisé comme unité de longueur CSS. 1rem = 100px, facile à convertir lors du débogage. Commun aux PC et aux terminaux mobiles (il est préférable de remplacer element-plus par d'autres frameworks d'interface utilisateur pour les terminaux mobiles).
Compatible avec IE10 et supérieur, Chrome, Firefox, Safari, QQ, 360, 2345 et autres navigateurs. Si vous devez passer à la version mobile, veuillez modifier .browsersrc vers la version mobile.
npm run dev
Développement local et débogage. Utilisez l'adresse du service d'interface backend configurée par dev dans config/serverMap.js.
npm run build-test
Utilisé pour le déploiement de l'environnement de test. js a un mappage de code source, css n'a pas de mappage de code source. Utilisez l'adresse du service d'interface configurée par test dans config/serverMap.js.
npm run build
Pour le déploiement de l’environnement de production. Utilisez l'adresse du service d'interface configurée par prod dans config/serverMap.js.
npm run build-demo
La configuration est la même que celle de l'environnement de production, seule l'adresse du service d'interface est différente. Utilisez l'adresse du service d'interface configurée par la démo dans config/serverMap.js.
npm run build-dev
Utilisé pour publier et déployer sur le serveur de l'environnement de développement, adapté aux situations où la publication sur le serveur est requise pour le débogage. Utilisez l'adresse du service d'interface configurée par dev dans config/serverMap.js.
npm run build-preview
Les données fictives statiques seront activées, aucun service back-end n'est requis et les données fictives seront utilisées pour simuler les appels ajax (à condition que l'interface API correspondante ait écrit des données fictives). Équivalent à npm run build --preview && npm run play-dist .
npm run play-dist
Avec le répertoire dist comme répertoire racine, démarrez un service http statique local pour afficher les résultats d'exécution du répertoire dist après la publication.
npm run mock
Lorsque le service d'interface back-end n'est pas terminé, il peut être utilisé pour simuler les données de l'interface back-end afin de déboguer la fonction front-end.
npm run proxy80
En proxyant le port existant (port 80xx) vers le port 80 ou le port 443, le port peut être masqué pendant l'accès et un accès https peut également être obtenu. En combinaison avec les hôtes du système et en configurant 127.0.0.1 comme nom de domaine spécifié, vous pouvez directement utiliser le nom de domaine pour accéder à la page de débogage locale, qui est utilisée pour déboguer certains scénarios où l'accès au nom de domaine doit être utilisé (comme le débogage de WeChat, pour plus de détails, voir : https://www.cnblogs.com/hz-blog/p/wechat-local-debug-domain.html).
