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,
    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版本。