iTaster admin template

indice

• généraliser
• Installer
• utiliser
• renouveler
• Configuration
• Architecture
• Problèmes connus
• licence

généraliser

Administrateur modifié basé sur le modèle Webpack4.x de vue-cli. Veuillez ne pas le télécharger. Le code préliminaire n'a aucune fonction. C'est uniquement pour le plaisir et la pratique.

Instructions de mise à jour

• 2018/6/19 Mettez à niveau le webpack, utilisez webpack4 et recommandez le nouveau plug-in mini-css-extract-plugin

Installer

 ＃克隆该项目
git clone https://github.com/iTaster/webpack4-template

# 安装依赖关系
npm install

# 编译开发环境
npm run dev

Par défaut, http://localhost:1988/ est automatiquement ouvert.

utiliser

 # 编译生产环境
npm run build

# 构建生产环境
npm run build --report

renouveler

Assurer les mises à jour ultérieures des modules du projet

 # 检测模块
npm outdated

# 更新模块
npm update

# 删除 node_modules 文件
npm install rimraf -g
rimraf node_modules

La commande npm outdated vérifiera vos modules installés et vous indiquera lesquels sont obsolètes.

Les informations spécifiques incluent : la version actuellement installée (Current), la version vers laquelle vous devez mettre à jour (Wanted) et la dernière version du référentiel (Latest).

Configuration

1. Si vous souhaitez télécharger le dossier dist , supprimez simplement /dist dans la configuration du fichier ignoré (fichier .gitignore ).

2. Par défaut, les fichiers de ressources compilés et traités par webpack seront stockés dans le dossier static . Si vous souhaitez les stocker uniquement dans le répertoire de fichiers racine, modifiez le paramètre build.assetsSubDirectory sous config/index.jx pour le laisser vide. Mais pas recommandé ! De cette façon, certains chemins d'image seront erronés lors de l'empaquetage. Il est recommandé de placer les ressources inférieures à 10 Ko et certaines icônes SVG (éléments qui ne seront généralement pas modifiés) dans le dossier src/assets , et les autres dans le static dossier.

3. Par défaut, les fichiers css/js fournis ont source map , qui sont très utiles pour déboguer le code dans l'environnement de développement. Cependant, il n'est pas recommandé de modifier le fichier config/index.js et de modifier la valeur. de build.productionSourceMap à : false .

4. Si le code s'exécute sur le serveur et que vous ne souhaitez pas avoir #/ dans la barre d'adresse, vous devez supprimer mode: 'history' dans router/index.js (une configuration backend est également requise, sinon la page actualisera 404 ); si la page doit utiliser des sauts d'ancrage. Accédez à l'emplacement spécifié et supprimez l'annotation scrollBehavior .

5. Il est livré avec autoprefixer . L'écriture de code CSS directement dans le fichier vue ajoutera automatiquement le préfixe.

Architecture

La structure de répertoires suivante est recommandée dans le cadre d'un développement volumineux sur une seule page :

src
    ├── README.md
    ├── assets                  // 全局资源目录
    │    ├── images            // 图片
    │    ├── css               // CSS 样式表
    │    └── fonts             // 自定义字体文件
    ├── components              // 公共组件目录
    │    ├── NavMenu.vue
    │    ├── Slider.vue
    │    └── ...
    ├── directives               // 公共指令
    ├── filters                  // 公共过滤器
    ├── i18n                     // 国际化
    │    ├── index.js           // 入口文件
    │    ├── zh.js
    │    └── en.js
    ├── router                   // 路由
    │    └── index.js
    ├── store                    // 状态管理
    │    ├── index.js        
    │    └── ...
    ├── views                    // 页面视图
    │    ├── login
    │    │    ├── index.vue
    │    │    ├── LoginForm.vue
    │    │    └── LoginSocial.vue
    │    ├── home
    │    │    ├── index.vue
    │    │    ├── HomeBanner.vue
    │    │    └── ...
    │    └── ...
    ├── App.vue                // 默认程序入口
    └── main.js

avantage:

• Si vous souhaitez utiliser /login dans un autre projet, copiez-le ou déplacez-le simplement vers le répertoire /components.

• Tant que vous avez installé des dépendances externes et que vous avez défini le même chargeur dans la configuration, le projet devrait fonctionner correctement.

Problèmes connus

• Il y a un bug dans le masquage de la barre latérale gauche

contribuer

Vous pouvez contribuer librement à ce projet en soumettant des tickets et/ou des pull request. Ce projet est piloté par des tests, alors n'oubliez pas que chaque modification et nouvelle fonctionnalité doit être couverte par des tests

licence

Ce projet est sous licence MIT.