vue-element-admin 後臺模版

vue-element-admin 是一個後臺前端解決方案，它基於 vue 和 element-ui實現。它使用了最新的前端技術棧，內建了 i18n 國際化解決方案，動態路由，許可權驗證，提煉了典型的業務模型，提供了豐富的功能元件，它可以幫助你快速搭建企業級中後臺產品原型。相信不管你的需求是什麼，

vue3 重寫vue-element-admin安裝使用

克隆專案

git clone https://github.com/huzhushan/vue3-element-admin.git

進入專案目錄

cd vue3-element-admin

安裝依賴

npm install

建議不要直接使用 cnpm 安裝依賴，會有各種詭異的 bug。可以通過如下操作解決 npm 下載速度慢的問題

npm install --registry=https://registry.npm.taobao.org

啟動服務

npm start

vue-element-admin專案目錄

├── build                      // 構建相關
├── config                     // 配置相關
├── src                        // 原始碼
│ ├── api                    // 所有請求
│ ├── assets                 // 主題 字型等靜態資源
│ ├── components             // 全域性公用元件
│ ├── directive              // 全域性指令
│ ├── filtres                // 全域性 filter
│ ├── icons                  // 專案所有 svg icons
│ ├── lang                   // 國際化 language
│ ├── mock                   // 專案mock 模擬資料
│ ├── router                 // 路由
│ ├── store                  // 全域性 store管理
│ ├── styles                 // 全域性樣式
│ ├── utils                  // 全域性公用方法
│ ├── vendor                 // 公用vendor
│ ├── views                   // view
│ ├── App.vue                // 入口頁面
│ ├── main.js                // 入口 載入元件 初始化等
│   └── permission.js          // 許可權管理
├── static                     // 第三方不打包資源
│ └── Tinymce                // 富文字
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置項
├── .gitignore                 // git 忽略項
├── favicon.ico                // favicon圖示
├── index.html                 // html模板
└── package.json               // package.json

 

vue-element-admin 打造後臺前端綜合解決方案實戰開發

import Vue from 'vue'

import Cookies from 'js-cookie'

import 'normalize.css/normalize.css' // a modern alternative to CSS resets

import Element from 'element-ui'
import './styles/element-variables.scss'
import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文語言包請預設支援，無需額外引入，請刪除該依賴

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import './icons' // icon
import './permission' // permission control
import './utils/error-log' // error log

import * as filters from './filters' // global filters

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

Vue.use(Element, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  locale: enLang // 如果使用中文，無需設定，請刪除
})

// register global utility filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
 

封裝 axios
我們經常遇到一些線上 的bug，但測試環境很難模擬。其實可以通過簡單的配置就可以在本地除錯線上環境。
這裡結合業務封裝了axios ，線上程式碼

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 建立axios例項
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 請求超時時間
})

// request攔截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  if (store.getters.token) {
    config.headers['X-Token'] = getToken() // 讓每個請求攜帶token--['X-Token']為自定義key 請根據實際情況自行修改
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone攔截器
service.interceptors.response.use(
  response => response,
  /**
  * 下面的註釋為通過response自定義code來標示請求狀態，當code返回如下情況為許可權有問題，登出並返回到登入頁
  * 如通過xmlhttprequest 狀態碼標識 邏輯可寫在下面error中
  */
  //  const res = response.data;
  //     if (res.code !== 20000) {
  //       Message({
  //         message: res.message,
  //         type: 'error',
  //         duration: 5 * 1000
  //       });
  //       // 50008:非法的token; 50012:其他客戶端登入了;  50014:Token 過期了;
  //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //         MessageBox.confirm('你已被登出，可以取消繼續留在該頁面，或者重新登入', '確定登出', {
  //           confirmButtonText: '重新登入',
  //           cancelButtonText: '取消',
  //           type: 'warning'
  //         }).then(() => {
  //           store.dispatch('FedLogOut').then(() => {
  //             location.reload();// 為了重新例項化vue-router物件 避免bug
  //           });
  //         })
  //       }
  //       return Promise.reject('error');
  //     } else {
  //       return response.data;
  //     }
  error => {
    console.log('err' + error)// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  })

export default service