GithubHelp home page GithubHelp logo

teng2015 / vue-admin Goto Github PK

View Code? Open in Web Editor NEW

This project forked from luichooy/vue-admin

0.0 0.0 0.0 551 KB

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

JavaScript 69.57% HTML 0.05% Vue 29.46% CSS 0.92%

vue-admin's Introduction

最近抽空做了一套新的vue后台管理系统模板,基于vue-cli3antd-design-vue,数据mock使用json-server

新版目前所有的基础结构和功能已经开发完毕,剩下的就是视情况(忙闲,毕竟还要搬砖😊)添加一些展示页面,完全不影响大家使用

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

新版传送门


以下是本项目介绍

技术栈:

[email protected][email protected][email protected][email protected][email protected][email protected]

Build Setup:

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

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

# 安装依赖
npm install

# 在开发环境运行项目,并且在浏览器打开 http://localhost:7999
npm run dev

# 项目打包
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

目录结构:

├── build
├── config
├── src
│   ├── assets
│   │   ├── images
│   │   ├── js
|   |   |   ├── addressData.js
│   │   │   ├── localStorage.js
│   │   │   ├── util.js
│   │   └── styles
│   │   │   ├── base.scss
│   │   │   ├── common.scss
│   │   │   ├── iconfont.css
│   │   │   ├── mixin.scss
│   │   │   ├── table.scss
│   │   │   ├── variable.scss
│   ├── components
│   │   ├── card
│   │   ├── filterbar
│   │   └── score
│   │   ├── selfAdd
│   │   ├── tableRadio
│   │   ├── validateCode
│   │   ├── Vmodel
│   ├── data
│   ├── pages
│   │   ├── charts
│   │   ├── error
│   │   ├── form
│   │   └── login
│   │   ├── main
│   │   ├── setting
│   │   ├── tables
│   │   ├── test
│   ├── router
│   │   ├── index.js
│   │   ├── route.js
│   ├── store
│   │   ├── getters.js
│   │   ├── index.js
│   │   ├── mutations.js
│   │   ├── state.js
│   ├── utils
│       ├── utils.js
│   ├── http.js
│   ├── main.js
│   ├── Root.vue
├── static
├── test
├── babelrc
├── eslintignore
├── eslintrc.js
├── .gitignore
├── postcssrc.js
├── index.html
├── package.json
└── readme.md

功能实现:

  • 登陆,登出
  • 验证码插件的实现
  • 通过vuex管理用户信息和token
  • 左侧菜单栏,上方顶部栏
  • 利用express完成api开发,实现数据mock
  • 利用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

vue-admin's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.