nkm web

système de gestion d'arrière-plan nkm côté Web

• Compte de test : testAdmin/nkm-123456
• L'échafaudage est 3.x et le projet a été configuré avec vue-router + vuex + eslint + axios + element-ui + sass(scss)
• Le magasin et le routeur ont adopté l'injection automatique
• Adresse de l'entrepôt du serveur : https://github.com/nkm-admin/nkm-server-ts

Installer les dépendances du projet

 yarn
or
npm install

Démarrer un projet

 yarn start
or
npm run start

Projet de package

 yarn build
or
npm run build

Charpie et corrige les fichiers

 yarn run lint
or
npm run lint

Description du fichier catalogue

 nkm-admin-client
├─.browserslistrc
├─.editorconfig
├─.env.development // 开发环境变量
├─.env.production // 生产环境变量
├─.env.test // 测试环境变量
├─.eslintignore
├─.eslintrc.js
├─.postcssrc.js
├─LICENSE
├─README.md
├─babel.config.js
├─jsconfig.json
├─package.json
├─vue.config.js
├─yarn.lock
├─src
|  ├─App.vue
|  ├─settings.js // 项目主要默认配置文件
|  ├─main.js
|  ├─utils // 公用工具类
|  |   ├─const.js
|  |   ├─cookie.js
|  |   ├─crypto.js
|  |   ├─index.js
|  |   └regexp.js
|  ├─store
|  |   ├─getters.js
|  |   ├─index.js
|  |   ├─modules
|  |   |    ├─authen.js
|  |   |    └widget.js
|  ├─router
|  |   └index.js
|  ├─request
|  |    └index.js
|  ├─pages
|  |   ├─main
|  |   |  ├─index.vue
|  |   |  ├─components
|  |   |  |     ├─BreadCrumb.vue
|  |   |  |     ├─Menu
|  |   |  |     |  ├─index.vue
|  |   |  |     |  └menuItem.vue
|  |   ├─login // 登录页
|  |   |   ├─index.vue
|  |   |   └login.router.js
|  |   ├─error // 系统错误页面
|  |   |   ├─error.router.js
|  |   |   ├─error.scss
|  |   |   ├─forbidden.vue
|  |   |   └notFound.vue
|  ├─modules // 所有业务页面，具体可参考系统管理部分
|  |    ├─system // 系统管理
|  |    |   ├─system.router.js
|  |    |   ├─user // 用户管理
|  |    |   |  ├─.router.js
|  |    |   |  ├─index.vue
|  |    |   |  ├─user.store.js
|  |    |   |  ├─components
|  |    |   |  |     └registered.vue
|  |    |   ├─role // 角色管理
|  |    |   |  ├─.router.js
|  |    |   |  ├─index.vue
|  |    |   |  └role.store.js
|  |    |   ├─resource // 资源管理
|  |    |   |    ├─.router.js
|  |    |   |    ├─index.vue
|  |    |   |    ├─resource.store.js
|  |    |   |    ├─components
|  |    |   |    |     └edit.vue
|  |    |   ├─dictionary  // 数据字典
|  |    |   |     ├─.router.js
|  |    |   |     ├─dictionary.store.js
|  |    |   |     └index.vue
|  |    ├─personalCenter  // 个人中心
|  |    |       ├─index.vue
|  |    |       ├─personal.router.js
|  |    |       ├─personal.store.js
|  |    |       ├─components
|  |    |       |     ├─information.vue
|  |    |       |     └security.vue
|  |    ├─dashboard  // 仪表盘
|  |    |     ├─dashboard.router.js
|  |    |     └index.vue
|  ├─filters // 全局指令
|  |    └index.js
|  ├─directive // 全局过滤器
|  |     └index.js
|  ├─components
|  |     ├─XDialog.vue
|  |     ├─XDotTag.vue
|  |     ├─index.js
|  |     ├─XTableContainer  // 布局组件
|  |     |        └index.vue
|  |     ├─XSvgIcon
|  |     |    ├─index.js
|  |     |    └index.vue
|  |     ├─XPagination
|  |     |      └index.vue
|  |     ├─XIcon
|  |     |   └index.vue
|  ├─assets
|  |   ├─svg-icon // svg图标
|  |   |    ├─icon-403-color.svg
|  |   |    ├─icon-404-color.svg
|  |   |    ├─icon-500-color.svg
|  |   |    └qq.svg
|  |   ├─scss // 项目公用scss
|  |   |  ├─class.scss
|  |   |  ├─element-ui-reset.scss
|  |   |  ├─global.scss
|  |   |  ├─iconfont.scss
|  |   |  ├─index.scss
|  |   |  ├─reset.scss
|  |   |  └variables.scss
|  |   ├─images
|  ├─api // 项目所有请求目录
|  |  ├─index.js
|  |  ├─personalCenter.js
|  |  ├─system
|  |  |   ├─dictionary.js
|  |  |   ├─resource.js
|  |  |   ├─role.js
|  |  |   └user.js
├─public
|   ├─favicon.ico
|   └index.html

Autres descriptions du catalogue

• actifs : répertoire de fichiers statique
  1. scss : fichier scss public. variables.scss a été introduit globalement. Il n'est pas nécessaire de l'introduire. Chaque page peut utiliser directement les variables qu'elle contient.
  2. svg-icon : stocke l'icône svg, le nom du fichier est le nom de l'appelant
• composants : répertoire public des composants, répertoire nommé en cas de chameau, automatiquement enregistré
  1. Chaque composant crée un dossier. Le nom du dossier utilise la casse camel. L'entrée du composant est : index.vue .
  2. svg-icon : composant d'icône svg, enregistré globalement, méthode d'appel : <x-svg-icon icon-name="name"></x-svg-icon> , icon-name est transmis à src/assets/svg-icon Le nom du fichier dans le répertoire peut être appelé
• modules :
  1. xxx.store.js de chaque module est un module vuex, qui est introduit dans le désordre et utilise require.context pour terminer l'injection automatique. Le nom du répertoire est le nom du module du magasin.
  2. xxx.router.js de chaque module est le module de routage

• vue.config.js : fichier de configuration du projet, des instructions spécifiques peuvent être trouvées sur https://cli.vuejs.org/zh/config/#vue-config-js

Guide de référence

• Vue du guide de style Vuejs
• Guide de style Eslint
• Vue du guide de style CSS
• Site officiel d'Element-UI