vue+ElementUI实现后台管理系统（二）

一、项目地址

项目链接

Getting started

# clone the project
git clone https://github.com/PanJiaChen/vue-element-admin.git

# enter the project directory
cd vue-element-admin

# install dependency
npm install

# develop
npm run dev

This will automatically open http://localhost:9527

二、项目目录介绍

Features

• Login / Logout

• Permission Authentication

  • Page permission
  • Directive permission
  • Permission configuration page
  • Two-step login

• Multi-environment build

  • dev sit stage prod

• Global Features

  • I18n
  • Multiple dynamic themes
  • Dynamic sidebar (supports multi-level routing)
  • Dynamic breadcrumb
  • Tags-view (Tab page Support right-click operation)
  • Svg Sprite
  • Mock data
  • Screenfull
  • Responsive Sidebar

• Editor

  • Rich Text Editor
  • Markdown Editor
  • JSON Editor

• Excel

  • Export Excel
  • Upload Excel
  • Visualization Excel
  • Export zip

• Table

  • Dynamic Table
  • Drag And Drop Table
  • Inline Edit Table

• Error Page

  • 401
  • 404

• Components

  • Avatar Upload
  • Back To Top
  • Drag Dialog
  • Drag Select
  • Drag Kanban
  • Drag List
  • SplitPane
  • Dropzone
  • Sticky
  • CountTo

• Advanced Example

• Error Log

• Dashboard

• Guide Page

• ECharts

• Clipboard

• Markdown to html

目录结构说明
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json

作者：花裤衩
链接：https://juejin.im/post/59097cd7a22b9d0065fb61d2
来源：掘金

三、简单的一个用户管理界面，可以实现增删改查功能

参考文章：
Vue+Mock.js模拟登录和表格的增删改查
项目地址：vue-element 地址

3.1本地项目目录：

3.2 页面分析

项目的页面布局可参考文章：
Vue2.0 + ElementUI 手写权限管理系统后台模板（三）——页面搭建

3.2.1 获取用户表格数据（查询）

3.2.2 新增用户表格数据

3.2.3 删除用户表格数据

3.2.4 编辑用户表格数据

四、关于前端界面如何进行调试和找到页面报错信息
需要场景。
五、webStorm的常用使用方法
webStorm快捷键使用
六、参考文档：
手摸手，带你用vue撸后台 系列一（基础篇）
完整项目地址：vue-element-admin

系列文章：
手摸手，带你用 vue 撸后台 系列一（基础篇）
手摸手，带你用 vue 撸后台 系列二(登录权限篇)
手摸手，带你用 vue 撸后台 系列三 (实战篇)
手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)
手摸手，带你用 vue 撸后台 系列五(v4.0 新版本)
手摸手，带你封装一个 vue component
手摸手，带你优雅的使用 icon
手摸手，带你用合理的姿势使用 webpack4（上）
手摸手，带你用合理的姿势使用 webpack4（下）
七、前端开发文档汇总
前端文档汇总（含代码规范、开发流程、知识分享,持续更新）
相关参考手册
JS参考手册
MDN 学习 Web 开发