/vue-admin

基于vue+vuex+element-ui搭建的PC端后台管理系统

Primary LanguageJavaScript

ant-design-vue版

大家感兴趣得话,可以去瞧瞧,如果觉得还行得话,给个⭐,谢谢各位喽😊


Build Setup:

# 将项目克隆到本地
git clone https://github.com/luichooy/vue-admin.git

# 进入到项目目录
cd vue-admin

# 安装依赖
yarn

# 启动本地服务,服务端运行在 3000 端口
yarn server

# 项目打包
yarn build

# lint
yarn lint

目录结构:

├── public
│   ├── favicon.ico
│   ├── index.html
├── src
│   ├── common
│   │   └── styles
│   │   │   ├── base.less
│   │   │   ├── common.less
│   │   │   ├── iconfont.css
│   │   │   ├── mixin.less
│   │   │   ├── table.less
│   │   │   ├── variable.less
│   │   ├── util
│   │   │   ├── date
│   │   │   ├── http
│   │   │   ├── storage
│   │   │   ├── index.js
│   ├── components
│   │   ├── card
│   │   ├── filterbar
│   │   └── score
│   │   ├── selfAdd
│   │   ├── tableRadio
│   │   ├── validateCode
│   │   ├── Vmodel
│   ├── pages
│   │   ├── charts
│   │   ├── error
│   │   ├── form
│   │   └── login
│   │   ├── main
│   │   ├── setting
│   │   ├── tables
│   │   ├── test
│   ├── router
│   │   ├── index.js
│   │   ├── route.js
│   ├── store
│   │   ├── getters.js
│   │   ├── index.js
│   │   ├── mutations.js
│   │   ├── state.js
│   ├── main.js
│   ├── App.vue
├── browserlistrc
├── eslintrc.js
├── .prettierrc
├── .gitignore
├── babel.config.js
├── package.json
└── readme.md

功能实现:

  • 利用koa完成api开发,实现服务端接口
  • 登陆,登出
  • 验证码插件的实现
  • 通过vuex管理用户信息和token
  • 左侧菜单栏,上方顶部栏
  • 利用axios设置请求,响应拦截器,对http请求进行统一管理
  • 设置vue-router的导航守卫,实现页面访问权限控制及页面跳转loading的统一管理
  • 引入vue-echarts,实现多种柱状图/折线图/饼图
  • 表格-基本表格示例
  • 自由表单渲染及自定义表单元素的实现

效果预览:


login.gif | center | 832x585

basic.gif | center | 832x585

charts.gif | center | 832x585

form.gif | center | 832x585

test.gif | center | 1316x926