正确姿势开发vue后台管理系统（vue-admin-webapp）
正确姿势开发vue后台管理系统
项⽬地址  欢迎star，fork
前⾔
相信许多⼈和我⼀样刚接触 vue 时看⽂档都很枯燥，看完 vue，还有 vueRouter 、vuex 、vue-cli、es6 (学不动了。。。 ) 对于看完教程之后⼜迟迟不能上⼿实际项⽬，只能写⼀些简单的⼩demo，这肯定和实际⽣产⼯作是有出⼊的，于是乎我就打算⾃⼰从零开始使⽤最新的技术栈搭建⼀个vue后台管理系统，依此加深对理论知识的学习，并增强⾃⼰的项⽬能⼒，所以希望本系列教程对你开发vue项⽬有所帮助。
1.项⽬基本简介
是⼀个后台管理 spa 页⾯，它基于  和  采⽤了最新的前端技术栈，实现了登录权限验证，动态路由⽣成，并使⽤  来模拟请求数据，实现了典型的业务模型案例，它可以帮你快速搭建后台管理系统模板，并根据实际的业务需求添加路由来实现企业级管理页⾯，相信本项⽬⼀定能帮助到你。
-
-  （推荐国内⽤户）
⽬前版本基于 webpack 4.0+ 和 vue-cli 3.x 版本构建，需要  8.9或更⾼版本（推荐8.11.0+），相关知识可以⾃⾏进官⽹进⾏了解
功能
- 登录 / 注销
- 登录仿GeeTest-极验安全策略
- 页⾯
- 初次进⼊引导⽤户
- sideBar收缩和展开
- 全屏控制
- 侧边栏
- 根据不同⽤户权限展⽰相应的动态左侧菜单
- 权限验证
- 管理员页⾯
- 权限设置
- 表格操作
- 涉及平常业务遇到的相关表格操作（参考）
- Excel
- Excel导出
- Excel导⼊
- 多级表头导出
- Echarts
vue element admin
- 滑动显⽰更多数据
-
动态切换charts
- map地图使⽤
- Icons
- element-icon
- 阿⾥iconfont
复制代码
准备⼯作
在开始之前，请确保在本地安装 node 和 webpack 及 git。 本项⽬涉及的技术栈主要有  、 、 、 、 、 、 、 、 ，所以你最好提前熟悉了解这些知识，这将对你认识学习该项⽬有很⼤帮助
⽬录结构
下⾯是整个项⽬的⽬录结构
├── 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            # 浏览器兼容相关
├── .                  # 环境变量配置 
├── .eslintrc.js              # eslint 配置项
├── .gitignore.js              # git忽略⽂件设置
├── .fig.js        # babel-loader 配置
├── package.json              # package.json
├── fig.js          # postcss 配置
└── fig.js              # vue-cli 配置
复制代码
安装
# 克隆项⽬
git clone git@github:gcddblue/vue-admin-webapp.git
# 进⼊项⽬⽬录
cd vue-admin-webapp
# 安装依赖
npm install
# 启动服务
npm run serve
复制代码
2.页⾯架构
击左侧菜单切换右侧router-view 的路由更替，对应的项⽬⽂件如下
3.axios封装
在vue项⽬中，和后台进⾏请求交互这块，我们通常都会选择axios库，它是基于promise的http库，可运⾏在浏览器端和node.js中。在本项⽬中主要实现了请求和响应拦截，get，post请求封装。
配置不同环境
通过在项⽬中创建不同环境的⽂件，我这⾥只创建了开发和⽣产环境的，当然，你也可以创建基于测试的.st 等⽂件，
以.env.production 为例：
ENV = 'production'
# base api
VUE_APP_BASE_API = 'www.easy-mock/mock/5cee951f11690b5261b75566/admin'
复制代码
只要以 VUE_APP_ 开头的变量都会被 webpack.DefinePlugin 静态嵌⼊到客户端的包中。你可以在应⽤的代码中这样访问它们，例如我在@/api/index.js中初始化axios：
const $axios = ate({
timeout: 30000,
// 基础url，会在请求url中⾃动添加前置链接
baseURL: v.VUE_APP_BASE_API
})
复制代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。