相信许多人和我一样刚接触 vue 时看文档都很枯燥,看完 vue,还有 vueRouter 、vuex 、vue-cli、es6 (学不动了。。。 ) 对于看完教程之后又迟迟不能上手实际项目,只能写一些简单的小demo,这肯定和实际生产工作是有出入的,于是乎我就打算自己从零开始使用最新的技术栈搭建一个vue后台管理系统,依此加深对理论知识的学习,并增强自己的项目能力,所以希望本系列教程对你开发vue项目有所帮助。
1.项目基本简介
vue-admin-webapp 是一个后台管理 spa 页面,它基于 vue 和 element-ui 采用了最新的前端技术栈,实现了登录权限验证,动态路由生成,并使用 easy-mock 来模拟请求数据,实现了典型的业务模型案例,它可以帮你快速搭建后台管理系统模板,并根据实际的业务需求添加路由来实现企业级管理页面,相信本项目一定能帮助到你。
-
在线预览-github
-
在线预览-gitee (推荐国内用户)
目前版本基于 webpack 4.0+ 和 vue-cli 3.x 版本构建,需要 Node.js 8.9或更高版本(推荐8.11.0+),相关知识可以自行进官网进行了解
功能 -
登录 / 注销
- 登录仿GeeTest-极验安全策略
-
页面
- 初次进入引导用户
- sideBar收缩和展开
- 全屏控制
-
侧边栏
- 根据不同用户权限展示相应的动态左侧菜单
-
权限验证
- 管理员页面
- 权限设置
-
表格操作
- 涉及平常业务遇到的相关表格操作(参考)
-
Excel
-
Excel导出
-
Excel导入
-
多级表头导出
-
Echarts
-
滑动显示更多数据
-
动态切换charts
-
map地图使用
-
Icons
-
element-icon
-
阿里iconfont
复制代码准备工作
在开始之前,请确保在本地安装 node 和 webpack 及 git。 本项目涉及的技术栈主要有 ES6 、vue 、vuex 、vue-router 、vue-cli 、axios 、webpack 、element-ui 、easyMock ,所以你最好提前熟悉了解这些知识,这将对你认识学习该项目有很大帮助
目录结构
下面是整个项目的目录结构
├── public # 静态资源
│ ├── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 图片、字体等静态资源
│ ├── components # 全局公用组件
│ ├── layout # 页面整体布局盒子
│ ├── mixins # 全局混入模块
│ ├── plugins # 全局插件部分
│ ├── router # 路由
│ ├── store # 全局store管理
│ ├── style # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor(excel导入导出)
│ ├── views # views所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
├── .borwserslistrc # 浏览器兼容相关
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .gitignore.js # git忽略文件设置
├── .babelrc.config.js # babel-loader 配置
├── package.json # package.json
├── postcss.config.js # postcss 配置
└── vue.config.js # vue-cli 配置
复制代码安装
克隆项目
git clone git@github.com:gcddblue/vue-admin-webapp.git
进入项目目录
cd vue-admin-webapp
安装依赖
npm install
启动服务
npm run serve
复制代码启动完成后将打开浏览器访问 http://localhost:8080,接下来你就可以根据自己的实际需求,可以添加或修改路由,编写自己的业务代码。
2.页面架构
除去登录页外,整个页面架构由三个部分组成 头部 侧边栏 右侧内容页 在项目@/layout/index.js文件中对对这三个组件进行封装,通过点击左侧菜单切换右侧router-view 的路由更替,对应的项目文件如下
3.axios封装
在vue项目中,和后台进行请求交互这块,我们通常都会选择axios库,它是基于promise的http库,可运行在浏览器端和node.js中。在本项目中主要实现了请求和响应拦截,get,post请求封装。
配置不同环境
通过在项目中创建不同环境的文件,我这里只创建了开发和生产环境的,当然,你也可以创建基于测试的.env.test 等文件,以.env.production 为例:
ENV = ‘production’
base api
VUE_APP_BASE_API = ‘https://www.easy-mock.com/mock/5cee951f11690b5261b75566/admin’
复制代码只要以 VUE_APP_ 开头的变量都会被 webpack.DefinePlugin 静态嵌入到客户端的包中。你可以在应用的代码中这样访问它们,例如我在@/api/index.js中初始化axios:
const $axios = axios.create({
timeout: 30000,
// 基础url,会在请求url中自动添加前置链接
baseURL: process.env.VUE_APP_BASE_API
})
复制代码通过创建api文件夹将所有接口都集中在这个文件夹中,根据不同的业务创建不同js文件,来更好的划分接口的功能,其中index.js中代码如下:
import axios from ‘axios’
import Qs from ‘qs’ // 处理post请求数据格式
import store from ‘@/store’
import router from ‘@/router’
import Vue from ‘vue’
import { Loading, Message } from ‘element-ui’ // 引用element-ui的加载和消息提示组件
const a x i o s = a x