vue-cli3 + elementUI 搭建的后台管理系统架子

1,456 阅读1分钟

先奉上git地址: github.com/fengqijie/c…

初衷:
市面上有很多基于 vue 的后台管理系统,比如最火的 vue-element-admin 和 iview-admin,但是它们都太沉重了,我们没办法拿过来直接使用,要删除里面的很多文件,这中间会有各种报错,所以我想能不能搭建一个极简版的架子,clone 下来直接使用的,所以就搭建了 common-manage-system

1、目录结构如下

1.png

src 下的主要文件夹如下:

components 里面是全局公共的组件:app.vuebreadcrumb.vue面包屑、sidebar.vue左侧菜单栏

network 里面是接口请求,下面的 apis 文件夹里,可以根据模块分类接口,也可以根据接口路径分类,看个人喜好。我在里面写了 get 和 post 的请求示例:

2.png

network 下的 interceptor.js,主要是对 axios 的封装,在里面可以做请求拦截和响应拦截。

3.png

network 下的 index.js,是我们的域名管理文件,根据环境变量判断是测试环境还是线上环境,区分域名。

4.png

store 下的 config 文件夹下有 menu-config.js 文件,是用来配置我们的左侧菜单栏的,不想展示的详情页不需要加在这个菜单里,只需要在根目录的 router.js 中加即可。

5.png

views 文件夹是放我们页面的位置,里面的 index.vue 是默认页面,common 文件夹里放公共页面,如404页面。

根目录下的 main.js 是项目的入口文件,router.js 是路由配置页面

.env 开头的是 环境变量配置文件

有哪里讲的不明白可以留言给我哦~~