快捷導(dǎo)航

vue-element-admin開發(fā)教程(v4.0.0之后)

更新時間：2022年04月28日 10:52:06 作者：樂之終曲

由于vue-element-admin的架構(gòu)再4.0.0版本后做了重構(gòu)，整體結(jié)構(gòu)上和之前的還是很相似的，但是也有些變化，本文就介紹vue-element-admin開發(fā)教程(v4.0.0之后)，感興趣的可以了解一下

由于 vue-element-admin 的架構(gòu)再 4.0.0 版本后做了重構(gòu)，所以寫這個文章，對改動比較大的部分做個講解，方便大家入門學(xué)習(xí)。雖說項(xiàng)目做了重構(gòu)，但是整體結(jié)構(gòu)上和之前的還是很相似的，所以有些和之前差不多的我會直接放之前文章的鏈接

由于 Markdown 實(shí)在不太會用，這里手動列下目錄，畢竟東西有點(diǎn)雜

安裝&準(zhǔn)備工作&ESLint配置
連接后臺真數(shù)據(jù)
Mock 假數(shù)據(jù)
不需要 Mock 虛擬數(shù)據(jù)怎么辦？
前端攔截器
登陸功能
自定義 vuex 參數(shù)
Mock 數(shù)據(jù)部分代碼

安裝&準(zhǔn)備工作&ESLint配置

安裝&準(zhǔn)備工作&ESLint 部分：Vue 新手學(xué)習(xí)筆記：vue-element-admin 之安裝，配置及入門開發(fā)（v4.0.0 之前）
這個就不多做講解了，可以直接參考之前的文章，寫的應(yīng)該算詳細(xì)了，這里只對下面 4 個內(nèi)容做個說明

node&npm 版本要求：

都知道框架對這兩點(diǎn)是有要求的，那么最低要求要達(dá)到哪呢？
最下面：package.json
這個是官方項(xiàng)目里的 package.json 文件，別人說的都不一定對，畢竟版本會迭代，自己看才是最實(shí)在的

i18n 國際化：

大部分人下的代碼都是 master 分支的代碼，照官方的說法國際化的功能被單獨(dú)拿出來開了個分支，所以需要這個功能的要去下
i18n 分支的代碼

Git 克隆指定分支的代碼

克隆步驟：

獲取你需要的項(xiàng)目的分支名：如 i18n

克隆項(xiàng)目：

# 格式：git clone -b <分支名> <URL>
git clone -b i18n https://github.com/PanJiaChen/vue-element-admin.git

-b表示要從分支下載

命令：

新版本的命令和舊版本的略有不同，還加了些命令，有興趣的可以試下，具體的可看 package.json 文件

# 發(fā)布
# 本地環(huán)境啟動
npm run dev
 
# 構(gòu)建測試環(huán)境
npm run build:stage
 
# 構(gòu)建生產(chǎn)環(huán)境
npm run build:prod
 
# 其它
# 預(yù)覽發(fā)布環(huán)境效果
npm run preview
 
# 預(yù)覽發(fā)布環(huán)境效果 + 靜態(tài)資源分析
npm run preview -- --report
 
# 代碼格式檢查
npm run lint
 
# 代碼格式檢查并自動修復(fù)
npm run lint -- --fix

啟動訪問報錯 404：

我在新項(xiàng)目啟動登陸報錯，那是因?yàn)楣俜?mock 只在正式環(huán)境啟用，我在 i18n 分支遇到的，缺心眼？
打開文件 src/main.js 把環(huán)境判斷去掉

連接后臺真數(shù)據(jù)

這個是很多人都關(guān)心的，我看了網(wǎng)上很多文章都是直接去 vue.config.js 去配 proxy，這并不是正確的配置方法。
還記得上個版本有分出各個環(huán)境的配置文件配置的，怎么可能這個版本就沒有了？官方是有提供配置文件的

.env.development：本地
.env.staging：測試環(huán)境
.env.production：正式環(huán)境

PS：這里唯一注意的就是舊版本是用用冒號連接，這里是等于，寫錯了就拿不到路徑
src/utils/request.js 在請求攔截器里打印看看

打?。耗玫秸f明配置正確

PS：其他的靜態(tài)配置都可以在這個文件里配置，比如一些靜態(tài)文件路徑之類的

Mock 假數(shù)據(jù)

為了更好的說明，這里使用的示例為自己寫的，不是項(xiàng)目里帶的，先大致列下項(xiàng)目對應(yīng)文件，具體代碼放文章結(jié)尾
這里 service 文件夾自己建的，就是個簡單的分頁列表示例

vue頁面文件：/src/views/service/index.vue
api接口：/src/api/service/index.js

PS：可能很多人覺得 api 文件多余，直接在頁面寫路徑，但是用 api 文件在路徑上更方便管理，這點(diǎn)在微服務(wù)中通過特定服務(wù)名去訪問顯得尤為明顯，類似這種：

mock 虛擬數(shù)據(jù)文件：/mock/service/index.js
mock 數(shù)據(jù)加載文件（這個原來就有）：/mock/index.js

流程說明：

頁面接口先去請求 api 文件

vue頁面文件

api接口

在 api 請求時會被 mock 攔截，先來看下 mock 數(shù)據(jù)

可以看到新版本在路徑攔截方面做了優(yōu)化，比之前的版本配置好理解

mock/index.js 中如果需要攔截就會被攔截

下拉可以看到，這里循環(huán)了 mocks 把這個頁面里所有有配置的接口都進(jìn)行了攔截

不需要 Mock 虛擬數(shù)據(jù)怎么辦？

很簡單，兩個字：注掉，這樣就不會攔截了

前端攔截器

路徑：/src/utils/request.js

這個文件分為 3 個部分

axios 實(shí)例，所以不需要自己去寫，引用下這個文件包下就好了，可以看下 api

service.interceptors.request.use 請求攔截器
可以憑需要自己新增一些請求頭之類的

service.interceptors.response.use 返回值攔截器
這里的邏輯不多說不難

登陸功能

去除那些無關(guān)的東西，比如什么 rules 校驗(yàn)啊，默認(rèn)的賬號密碼之類的東西，直接看核心登陸方法

/src/views/login/index.vue

邏輯很簡單，登陸參數(shù)校驗(yàn) ? 調(diào)用 store 里的 login 方法登陸 ? 成功跳到對應(yīng)頁面

handleLogin() {
    // 登陸校驗(yàn)
    this.$refs.loginForm.validate(valid => {
        // 如果校驗(yàn)通過
	if (valid) {
	  this.loading = true
	  // 這里進(jìn)行登陸請求 login 方法
          // 在 src/store/modules/user.js
	  this.$store.dispatch('user/login', this.loginForm)
	    .then(() => {
	      // otherQuery 就是你從哪個頁面退出的，幫你重定向回那個頁面
	      this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
	      this.loading = false
	    })
	    .catch((errorMsg) => {
	      this.loading = false
	      // 登陸失敗提示
	      Message({
		message: errorMsg,
		type: 'error',
		duration: 5 * 1000
	      })
	    })
	} else {
	  console.log('error submit!!')
	  return false
	}
    })
},

/src/store/modules/user.js ? login方法

在登陸方法里建議不要做多于操作，就登陸就行了，因?yàn)榫彺嬗玫臅r vuex 和之前版本一樣刷新就沒了，所以還需要走 getInfo 方法來獲取需要的數(shù)據(jù)，如果你按照框架的來，建議必要權(quán)限數(shù)據(jù)在這取，然后放 vuex，那些準(zhǔn)備直接放 localStorage 的請無視。

/src/views/permissions.js

和之前的版本一樣，這個文件就是你路由走的邏輯，簡單看下重要部分

PS：這里對比你自己的會發(fā)現(xiàn)，原本代碼里寫的是 const { roles } = await xxxxx，我這里直接把括號去了，按我的理解這個括號應(yīng)該是只能接收數(shù)組類型的參數(shù)，但是我不管怎么傳拿到的都是 null，要么報錯，我就干脆改掉了

/src/store/modules/user.js ? getInfo方法

這里直接看下我改過的，可以對比下自己源代碼，然后進(jìn)行修改，至于這里調(diào)的 api 接口啥的就不多說了，沒區(qū)別
commit 方法就是把值傳到 vuex 里

// get user info
getInfo({ commit, state }) {
	return new Promise((resolve, reject) => {
		getInfo(state.token).then(response => {
			const data = response.data
 
			// 設(shè)置按鈕權(quán)限到 vuex
			commit('SET_BUTTON', data.retData.button)
			if (data.retData.module && data.retData.module.length > 0) { // 驗(yàn)證返回的roles是否是一個非空數(shù)組
			  commit('SET_ROLES', data.retData.module)
			} else {
			  // 當(dāng)用戶無任何權(quán)限時設(shè)置
			  commit('SET_ROLES', ['普通用戶'])
			}
			commit('SET_NAME', data.retData.username)
			commit('SET_AVATAR', 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif')
			commit('SET_INTRODUCTION', data.retData.username)
 
			resolve(data.retData.module)
			}).catch(error => {
			reject(error)
		})
	})
},

/src/store/modules/permission.js ? generateRoutes方法

這里就是，目錄加載了，這個部分和之前差不多一樣，就不多說了

目錄權(quán)限部分：Vue 新手學(xué)習(xí)筆記：vue-element-admin 之登陸及目錄權(quán)限控制

PS：舊版本的 filterAsyncRoute 方法在新版里叫 filterAsyncRoutes 多了個 s 注意下

自定義 vuex 參數(shù)

比如我自定義的 button 參數(shù)

使用 commit 之前上面對應(yīng)的也是要的

Mock 數(shù)據(jù)部分代碼

vue頁面文件：/src/views/service/index.vue

<template>
  <div class="app-container">
    <el-table :data="list" border fit highlight-current-row style="width: 100%;" height="611px">
      <el-table-column :show-overflow-tooltip="true" aellign="center" label="服務(wù)單號">
        <template slot-scope="scope">
          <span>{{ scope.row.data1 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="性質(zhì)">
        <template slot-scope="scope">
          <span>{{ scope.row.data2 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="客戶">
        <template slot-scope="scope">
          <span>{{ scope.row.data3 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="聯(lián)系人">
        <template slot-scope="scope">
          <span>{{ scope.row.data4 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="工程師">
        <template slot-scope="scope">
          <span>{{ scope.row.data5 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="送修/上門時間">
        <template slot-scope="scope">
          <span>{{ scope.row.data7 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" label="修復(fù)/結(jié)束時間">
        <template slot-scope="scope">
          <span>{{ scope.row.data8 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" class-name="status-col" label="部門">
        <template slot-scope="scope">
          <span>{{ scope.row.data10 }}</span>
        </template>
      </el-table-column>
 
      <el-table-column :show-overflow-tooltip="true" align="center" class-name="status-col" label="操作">
        <template slot-scope="scope">
          <input :loading="checkLoading" type="button" class="el-button el-button--primary el-button--medium" value="確認(rèn)" @click="checkFwdbh(scope.row.data1)">
        </template>
      </el-table-column>
 
    </el-table>
    <!-- 分頁 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getServiceList"
    />
  </div>
</template>
 
<script>
import { getServiceList } from '@/api/service/index'
import Pagination from '@/components/Pagination'
 
export default {
  components: { Pagination },
  data() {
    return {
      // 加載樣式控制
      checkLoading: false,
 
      // 數(shù)據(jù)列表
      list: [],
      // 數(shù)據(jù)條數(shù)
      total: 0,
      // 按鈕加載等待
      loading: false,
 
      listQuery: {
        // 分頁參數(shù)
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    // 加載列表
    this.getServiceList()
  },
  methods: {
    // 獲取列表數(shù)據(jù)
    getServiceList() {
      getServiceList(this.listQuery).then(response => {
        this.list = response.items
        this.total = response.total
      })
    },
    // 確認(rèn)請求
    checkFwdbh(fwdbh) {
      alert(fwdbh)
    }
  }
}
</script>
 
<style scoped>
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
 
/* 布局樣式 */
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

api接口：/src/api/service/index.js

import request from '@/utils/request'
 
const SERVICE = '/service'
 
// 獲取列表數(shù)據(jù)
export function getServiceList(query) {
  return request({
    url: SERVICE + '/service/getServiceLogList',
    method: 'post',
    data: query
  })
}

mock 虛擬數(shù)據(jù)文件：/mock/service/index.js

const List = []
const count = 30
 
// 模擬數(shù)據(jù)列表
for (let i = 0; i < count; i++) {
  List.push({
    data1: 'ABCD00000000000',
    data2: '1004553',
    data3: '送修',
    data4: 'xxxxxxxx辦事處',
    data5: '林xx',
    data6: '王xxx',
    data7: '2005-11-07 00:00',
    data8: '2006-07-20 00:00',
    data9: '已核銷不開票',
    data10: '技術(shù)支持部'
  })
}
 
const SERVICE = '/service'
 
export default [
  {
    // 攔截的路徑
    url: SERVICE + '/service/getServiceLogList',
    type: 'post',
    response: _ => {
      return {
        code: 20000,
        total: List.length,
        items: List,
        limit: 10
      }
    }
  }
]

mock 數(shù)據(jù)加載文件（這個原來就有）：/mock/index.js