1、vue-element-admin
1.1、简介
vue-element-admin是基于element-ui 的一套后台管理系统集成方案。
GitHub地址：https://github.com/PanJiaChen/vue-element-admin
百度与链接：https://pan.baidu.com/s/11aI_2SnIA6rmZLwTXVvvfQ
提取码：ihga
复制这段内容后打开百度网盘手机App，操作更方便哦
1.2、安装
1.2.1、将上边下载解压后的文件放到工作区
1.2.2、下载依赖
npm install
1.2.3、启动前端项目
npm run dev
执行后，浏览器自动弹出并访问http://localhost:9527/
2、vue-admin-template(精简版)
2.1、简介
vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。
GitHub地址：https://github.com/PanJiaChen/vue-admin-template
建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。
百度云链接：https://pan.baidu.com/s/1XWHu5bOIMVv6QoEGZ2_U9A
提取码：gvll
复制这段内容后打开百度网盘手机App，操作更方便哦
2.2、安装
2.2.1、下载依赖
# 下载依赖
npm install
下载好的依赖都在node_modules文件下
2.2.2、启动
npm run dev
执行后，浏览器自动弹出并访问http://localhost:9528/
3、前端框架讲解
修改下面的值。该值默认为ture，意思是使用Eslint，即会检查语法。但其检查过于严格，建议将值改为false。
3.1、目录结构
vue-element-admin-master（拥有完整的功能的插件）
3.2、关键文件
vue-admin-template-master（源码相对简单，我们的后台管理系统基于这个版本）
3.2.1、package.js
npm项目的核心配置文件，包含项目信息，项目依赖，项目启动相关脚本，相当于maven中的pom.xml文件。主要做依赖版本控制。
- 启动项目的命令： npm run dev
- dev脚本：webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
- webpack-dev-server：一个小型的基于Node.js的http服务器，可以运行前端项目
- –inline：一种启动模式
- –progress：显示启动进度
- –config build/webpack.dev.conf.js：指定webpack配置文件所在位置
3.2.2 、build/webpack.dev.conf.js
webpack配置文件，包含项目在开发环境打包和运行的相关配置
- webpack.dev.conf.js 中引用了 webpack.base.conf.js
- webpack.base.conf.js 中定义了项目打包的入口文件
在HtmlWebpackPlugin配置html模板，生成的js就会自动插入到模板中，如下面的配置。
因此生成的js文件会被自动插入到名为index.html的页面中
3.2.3、 index.html
项目默认的html页面
3.2.4、 src/main.js
项目js入口文件，项目的所有前端功能都在这个文件中引入和定义，并初始化全局的Vue对象
3.2.5、config/dev.env.js
定义全局常量值
因此，在项目中的任意位置可以直接使用 process.env.BASE_API 常量表示后端接口的主机地址
3.2.6、 src/utils/request.js
引入axios模块，定义全局的axios实例，并导出模块
3.2.7、 src/api/login.js
引用request模块，调用远程api
4、临时登录接口
4.1、前端登录问题
默认情况下，前端项目已经实现了登录功能，后端连接到远程Mock平台的模拟数据接口进行登录，而Mock平台地址无效，导致前端的登录功能无法执行
4.2、解决登录问题
修改user.js文件内容
4.2.1、修改登录方法
4.2.2、修改获取用户信息的方法
4.2.3、修改登出的方法
4.2.4、修改前端 登出方法
![```html
在这里插入代码片
代码如下
```html
actions: {
// 登录
Login({ commit }, userInfo) {
const data = {'token':'admin'}
setToken(data.token)
commit('SET_TOKEN', data.token)
// const username = userInfo.username.trim()
// return new Promise((resolve, reject) => {
// login(username, userInfo.password).then(response => {
// const data = response.data
// setToken(data.token)
// commit('SET_TOKEN', data.token)
// resolve()
// }).catch(error => {
// reject(error)
// })
// })
},
// 获取用户信息
GetInfo({ commit, state }) {
const data = {
'roles':'admin',//设置角色
'name':'admin',//设置名字
'avatar':'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'//设置头像
}
if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
commit('SET_ROLES', data.roles)
} else {
reject('getInfo: roles must be a non-null array !')
}
commit('SET_NAME', data.name)
commit('SET_AVATAR', data.avatar)
// return new Promise((resolve, reject) => {
// getInfo(state.token).then(response => {
// const data = response.data
// if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
// commit('SET_ROLES', data.roles)
// } else {
// reject('getInfo: roles must be a non-null array !')
// }
// commit('SET_NAME', data.name)
// commit('SET_AVATAR', data.avatar)
// resolve(response)
// }).catch(error => {
// reject(error)
// })
// })
},
// 登出
LogOut({ commit, state }) {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken()
// return new Promise((resolve, reject) => {
// logout(state.token).then(() => {
// commit('SET_TOKEN', '')
// commit('SET_ROLES', [])
// removeToken()
// resolve()
// }).catch(error => {
// reject(error)
// })
// })
},
// 前端 登出
FedLogOut({ commit }) {
// return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken()
resolve()
// })
}
}
}
4.2.5、修改reques.js
中括号中的‘X-Token’改为’token’
转载：https://blog.csdn.net/qq_46112274/article/details/117371133