MYSUN

V1

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/

以下是官网的建议:

![image-20220101181715574](Element ui admin初体验.assets/image-20220101181715574.png)

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,
    opentrue,
    proxy:{
      [process.env.VUE_APP_BASE_API]:{
        target'http://域名/'// 后台接口域名
        changeOrigintrue,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    overlay: {
      warningsfalse,
      errorstrue
    },
    // 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',
        duration5 * 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'//网站标题
  showSettingstrue,//是否展示页面设置
  tagsViewtrue,//是否展示标签页
  fixedHeaderfalse,//是否固定头部
  sidebarLogofalse,//是否在左侧导航展示logo
  supportPinyinSearchtrue,
  errorLog'production'
}

总结

总体来说,admin版本的功能较为齐全,很多插件都不需要自己装,只需要将其复制到自己要使用的页面即可,像生成pdf文件,md编辑器,json编辑器,七牛云上传图片的前端配置等,一些比较常用的功能。

但是这个版本略微臃肿,如果容易造成代码冗余,因此如果是小项目,或者是不需要那么多功能的后台管理,建议使用template版本。

分类:

前端

标签:

Vue.js

作者介绍

MYSUN
V1