今天分享的源码是我很早之前gitee上开源的一个管理后台模版，是基于vue和elementUI的一个基础版，技术栈使用：vue2 + vuex + vue-router + webpack + ES6/7 + axios + elementUI + 阿里图标iconfont，可以说基本上使用了vue全家桶，对新手来说，是个不错的上手项目。
网络异常，图片无法展示
|
体验地址
这是一个纯前台的（不包括接口API）的界面，项目中的数据皆为假数据，没有使用插件mock，但是增删改查功能已开发完成，只需按照假数据格式返回数据编写API即可
。
1 完成功能
√登录 -- 完成
√路由拦截 -- 完成
√商品管理（增加、编辑、搜索、删除） -- 完成
√角色管理（增加、编辑、搜索、删除、权限管理） -- 完成
√交易订单（增加、编辑、搜索、删除） -- 完成
√用户管理（增加、编辑、搜索、删除、数据权限、刷新缓存） -- 完成
√支付配置（增加、编辑、搜索、删除） -- 完成
√系统环境变量（增加、编辑、搜索、删除） -- 完成
√权限管理（增加、编辑、搜索、删除、配置权限） -- 完成
√菜单管理（增加、编辑、搜索、删除） -- 完成
√公司管理（增加、编辑、搜索、删除） -- 完成
2 目录结构
首先，我们熟悉下目录结构。
├── /build/ # 项目构建(webpack)相关配置 ├── /config/ # 项目开发环境配置 ├── /src/ # 源码目录 │ ├── /api/ # 请求 │ ├── /assets/ # 组件静态资源(图片) │ ├── /components/ # 公共组件 | ├── /api/ # 请求接口 │ ├── /router/ # 路由配置 │ ├── /vuex/ # vuex状态管理 │ ├── /views/ # 路由组件(页面维度) │ ├── /config/ # 接口配置文件（请求地址） │ ├── App.vue # 组件入口 │ └── main.js # 程序入口 ├── /static/ # 非组件静态资源 ├── .babelrc # ES6语法编译配置 ├── .editorconfig # 定义代码格式 ├── .eslintignore # ES6规范忽略文件 ├── .eslintrc.js # ES6语法规范配置 ├── .gitignore # git忽略文件 ├── index.html # 页面入口 ├── package.json # 项目依赖 └── README.md # 项目文档
复制
一个标准的项目结构，目录及项目中的作用一一对应。
3 运行项目
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test
复制
4 对接后台
在config/index.js配置后端接口代理（只适用开发环境）
dev: { assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://xxx.xxx.xxx.xxx:xxx', // 你请求的第三方接口 changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: { // 路径重写， '^/api': '/api' // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。 } } }, },
复制
在src/api下，新建文件或者修改已有文件，配置接口请求地址
import axios from 'axios'; import { req } from './axiosFun'; /** * 商品管理 **/ // 商品管理-获取商品管理列表 export const GoodsList = (params) => { return req("post", "/api/Goods/list", params) }; // 商品管理-保存商品管理 export const GoodsSave = (params) => { return req("post", "/api/Goods/save", params) };
复制
在views/模块（如goods）/.vue文件里，getdata方法去掉模拟数据，取消注释的请求方法。
5 源码
码云（gitee）
如果没有码云账号的话，提供网盘下载，获取回复关键字【管理平台源码】
