MYSUN
2022/01/07阅读:89主题:橙心
Element admin初体验
Element admin初体验
用过了ant design admin之后,这次网站项目的后台,我选择了Element admin这个开箱即用的后台系统模板,因为网站项目较为简单,所以选择了vue-admin-template这套,与admin的版本差别不是非常大,代码和页面精简了不少,相对来说,比较适合二开。
当然如果需要的功能较多,可以使用admin的版本来进行二开,毕竟不需要自己去重新安装插件。
**Element admin官网地址:**https://panjiachen.github.io/vue-element-admin-site/zh/
以下是官网的建议:

1.下载安装
官网给的是git的下载地址,如果下载比较慢,下面我把gitee的地址挂上去,大家也可以直接下载zip包,然后解压后使用npm命令安装。
# git克隆地址
# admin
git clone https://github.com/PanJiaChen/vue-element-admin.git
# template
git clone https://github.com/PanJiaChen/vue-admin-template.git
# gitee克隆地址
https://gitee.com/panjiachen/vue-element-admin.git
# 不用怀疑,这个是我自己传的自己的gitee仓库里的,因为我没找到别个的
https://gitee.com/musungit/vue-admin-template.git
克隆到本地之后就是,安装依赖,然后运行起来
npm install
npm run dev
跑起来进入登陆页面,则证明安装完成,不要使用cnpm 会出现莫名其妙的问题,这里说一下,推荐使用vscode自带终端运行,不要问为什么,问就是翻车的几率小。
进入之后,使用登录页面提示的账号和密码,即可登录进去。
2.修改初始化配置
element ui的初始化配置相比较于ant vue少了太多,完全符合vue2.0的项目构建,熟悉vue的同学能够很快上手。
先看main.js中的配置
先讲mock关闭,方便后面配置代理,然后根据注释,使用中文版本,相对来说,elementadmin是比较好上手的。
// if (process.env.NODE_ENV === 'production') {
// const { mockXHR } = require('../mock')
// mockXHR()
// }
// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui,按如下方式声明
Vue.use(ElementUI)
vue.config.js
这里主要修改proxy的配置项,来进行代理
devServer: {
port: port,
open: true,
proxy:{
[process.env.VUE_APP_BASE_API]:{
target: 'http://域名/', // 后台接口域名
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
overlay: {
warnings: false,
errors: true
},
// before: require('./mock/mock-server.js')
},
.env.production
# just a flag
ENV = 'production'
# base api
# VUE_APP_BASE_API = '/prod-api'
VUE_APP_BASE_API = ''
这里要注意,修改完之后,最好,重新启动一次项目
正常启动之后,因为关闭了mock,是无法直接登录,进去的,所以我们先掉登录的接口
找到src/api/user.js改成自己的接口地址
export function login(data) {
return request({
url: '/user/login',
method: 'post',
data
})
}
接着找到utils/request.js
这里判断了,token存在的话,将其直接添加到请求头中,当然这里如果在做加密更好
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['X-Token'] = getToken()
}
request.js中还要将判断的状态码改成真实后端返回的成功状态码,一般都是200
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
最后找到store/modules/user.js
这里是登录的actions,可以看到登录请求回来的是token,然后讲token提交到了SET_TOKEN,后端返回的token如果在data下,则不需要修改,要是数据结构有变化,再进行相应的修改
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
const { data } = response
commit('SET_TOKEN', data.token)
setToken(data.token)
resolve()
}).catch(error => {
reject(error)
})
})
},
以上配置都没有问题,那么登录接口就基本没问题了,不过此时还进不去主页。
这里请求完登录之后,再跳转首页的时候,请求了info接口,因此,还需要一个用户信息的接口,这里只需要讲api/user.js中的user/info接口改成自己的便可,注意前后端字段要对上,如此,便能进入首页。
3.修改页面设置项
找到src/views/settings.js
module.exports = {
title: 'Vue Element Admin', //网站标题
showSettings: true,//是否展示页面设置
tagsView: true,//是否展示标签页
fixedHeader: false,//是否固定头部
sidebarLogo: false,//是否在左侧导航展示logo
supportPinyinSearch: true,
errorLog: 'production'
}
总结
总体来说,admin版本的功能较为齐全,很多插件都不需要自己装,只需要将其复制到自己要使用的页面即可,像生成pdf文件,md编辑器,json编辑器,七牛云上传图片的前端配置等,一些比较常用的功能。
但是这个版本略微臃肿,如果容易造成代码冗余,因此如果是小项目,或者是不需要那么多功能的后台管理,建议使用template版本。
作者介绍