1985zrd / admin-manage

基于vue的后台管理系统模板

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vue-admin-base(ikang后台管理系统基础库)

使用

  1. git clone git@gitlab.it.ikang.com:fe/vue-admin-base.git 你的项目名字
  2. cd 你的项目名字
  3. git remote origin set-url origin 新的仓库地址 修改提交地址(修改提交地址到你当前项目gitlab地址)
  4. npm install
  5. npm start

用到的技术栈

包含但不限:@vue/cli(脚手架工具)、webpack(工具)、vue(框架)、vuex(状态管理)、vue-router(路由管理)、ikit(爱康UI组件)、axios(数据获取)、vue-color(颜色获取组件)、vuex-persistedstate(状态持久化)、js-cookie(cookie操作)、eslint(代码检测)、less(css预编译)、sass(css预编译)、webpack-theme-color-replacer(主题色切换)

提供的功能

  1. UI组件使用ikit,支持全局注册,也支持部分注册和局部注册,需引入ikit.css,见src/main.js
  2. 环境配置,在src/config/index.js里修改
  3. src/main.js里注册了一些vue filter方法,在/src/utils/index.js里可以查看
  4. 动态路由或静态路由可根据项目进行选择,在src/main.js里设置
  5. /src/utils/index.js里提供了部分常用方法
  6. vuexsrc/srore里,做了持久化,提供了demo做参考
  7. src/http/index.js二次封装了axios,做了数据拦截、请求取消、多个请求的loading合并
  8. 封装了登录页,在src/views/login文件夹下
  9. 提供了404页面,在src/views/errorPage.vue
  10. 提供了可修改主题色,在src/components/ThemeSetting.vue
  11. 提供了layout组件,在src/layout
  12. 提供eslint代码检测
  13. 添加命令npm run tep viewName创建一个页面组件。viewName为你需要创建的页面组件名称。命令在src/views里创建了viewName文件夹,包含viewName.vue和viewName.scss,同时在src/api文件夹下创建viewName.js。详见scripts/template.js
  14. 添加命令npm run com ComponentName创建一个通用组件或业务组件。ComponentName为你需要创建的组件名称。命令在src/components里创建了ComponentName文件夹,包含ComponentName.vue。详见scripts/component.js

环境依赖

node v8+

目录结构描述

├── README.md
├── .eslintrc.js 配置eslint规则
├── babel.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── config 项目配置相关
│   └── plugin.config.js
├── public 静态资源
│   ├── favicon.ico
│   └── index.html
├── scripts
│   ├── component.js
│   └── template.js
├── src
│   ├── App.vue
│   ├── api api接口相关
│   ├── assets
│   │   └── images
│   ├── components 组件文件夹
│   │   ├── HelloWorld.vue
│   │   ├── common 通用组件文件夹
│   │   ├── ThemeSetting.vue 设置主题色组件
│   │   └── login-container 登录组件
|   |        ├── login-container.less
|   |        └── LoginContainer.vue
│   ├── config 配置信息,包括环境配置
│   │   └── index.js
│   ├── http 请求相关
│   │   ├── index.js
│   │   └── loading.js
│   ├── main.js
│   ├── layouts 组件组合
│   │   ├── Header.vue
│   │   ├── Menu.vue
│   │   └── index.vue
│   ├── router 有静态路由和动态路由可供选择
│   │   |── dynamicRoutes.js 动态路由
│   │   |── staticRoutes.js 静态路由
│   │   └── index.js
│   ├── store vuex做了持久化(可自行选择)
│   │   |── demo 这里写了一个demo
|   |   |   ├── state.js
|   |   |   ├── getters.js
|   |   |   ├── actions.js
|   |   |   ├── mutations.js
|   |   |   ├── types.js
|   |   |   └── index.js
│   │   |── menu 左侧菜单栏相关
│   │   |── theme 主题色相关
│   │   └── index.js
│   ├── utils 工具方法
|   |   ├── index.js
│   |   └── changeTheme 修改主题色相关
|   |       ├── settingConfig.js
|   |       └── themeColor.js
│   └── views 页面
│       ├── About.vue
│       ├── errorPage.vue
│       ├── Home.vue
│       └── login
|           ├── login.less
|           └── Login.vue
└── vue.config.js

About

基于vue的后台管理系统模板


Languages

Language:JavaScript 68.9%Language:Vue 24.3%Language:CSS 5.7%Language:HTML 1.1%