vue-cli3+element搭建後臺管理項目

一、安裝需要的插件

（1）創建項目

vue create admin_project

（2）安裝element

npm i element-ui -S

（3）安裝js-base64 js-md5 用於賬號登錄註冊

npm install --save js-base64
npm install --save js-md5

（4）安裝默認樣式清除 normalize.css

npm i normalize.css --save-dev

報錯的話需要安裝原因沒有安裝：css-loader 和style-loader

npm install css-loader style-loader

（5）安裝axios

npm install axios --save

（6）安裝cookie js-cookie

npm i js-cookie

//引入
import Cookies from 'js-cookie'

 //具體使用
Basic Usage
 
Create a cookie, valid across the entire site:
 
Cookies.set('name', 'value');
Create a cookie that expires 7 days from now, valid across the entire site:
 
Cookies.set('name', 'value', { expires: 7 });
Create an expiring cookie, valid to the path of the current page:
 
Cookies.set('name', 'value', { expires: 7, path: '' });
Read cookie:
 
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined
Read all visible cookies:
 
Cookies.get(); // => { name: 'value' }
Delete cookie:
 
Cookies.remove('name');
Delete a cookie valid to the path of the current page:
 
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!
IMPORTANT! when deleting a cookie, you must pass the exact same path and domain attributes that was used to set the cookie, unless you're relying on the default attributes.
Note: Removing unexisting cookie does not raise any exception nor return any value

（7）在項目中安裝 element-resize-detector 爲了監聽某區域size變化插件使用詳情

npm install element-resize-detector

（8）安裝圖表 echart

npm install echarts --save

二、如何在項目中使用以上的插件

（1）啓動項目和如何打包

//終端下在項目裏
//啓動項目
npm run serve

//打包項目
npm run build

（2）element-ui在項目中如何使用（全局使用）

//main.js
import ElementUI from 'element-ui'

Vue.use(ElementUI, { size: 'small', zIndex: 3000 })

（3）在項目中應用js-cookie js-md5 js-base64

//main.js

import Cookies from "js-cookie"
import md5 from "js-md5"

Vue.prototype.$base64 = require("js-base64").Base64

（4）在main.js 全局使用normalize.css

import "normalize.css"

（5）使用axios

//main.js

import axios from "axios"
Vue.prototype.$axios = axios

（6）在項目中使用element-resize-detector

//在需要用到的組件中使用

//引用
var elementResizeDetectorMaker = require("element-resize-detector")



  // 區域元素size改變
    var erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById("homeTest"), function (element) {
      console.log("echarts區域尺寸改變")
     console.log(element)
    })

(7)全局引用echarts

//main.js

import echarts from "echarts"

Vue.prototype.$echarts = echarts

（8）自定義element主題

在官網下載主題包並放到項目中，主題包使用教程點擊可查看

//本項目主題包地址  ./assets/font/iconfont.css

//main.js 中引用

import "./assets/font/iconfont.css"

（9）使用iconfont圖標，從阿里圖標庫裏下載

//main.js 
import "./assets/font/iconfont.css"

三、在項目中封裝axios 請求攔截設置

在項目src新建文件夾 utils —> http.js 詳細點擊查看

import axios from 'axios' // 引用axios
import { MessageBox, Message } from 'element-ui'
import Qs from 'qs'
import router from '@/router'

/* eslint-disable no-alert, no-console, no-empty,no-unused-vars */
// axios 配置
// 設置響應超時
axios.defaults.timeout = 50000
// axios.defaults.baseURL = 'https://easy-mock.com/mock/' // 這是調用數據接口,公共接口url+調用接口名
let httpUrl = window.location.host
if (httpUrl.indexOf('.com') !== -1) {
  console.log('生產環境', httpUrl)
} else if (httpUrl.indexOf('.net') !== -1) {
  console.log('測試環境', httpUrl)
  axios.defaults.baseURL = 'http://vk.autobole.net/volkswagen/' // 這是調用數據接口,公共接口url+調用接口名
} else if (httpUrl.indexOf('localhost:8088') !== -1) {
  console.log('指定開發環境', httpUrl)
  // axios.defaults.baseURL = "https://way.jd.com";
} else {
  console.log('開發環境', httpUrl)
  // axios.defaults.baseURL = "https://way.jd.com"; // 這是調用數據接口,公共接口url+調用接口名
}

// http request 攔截器，通過這個，我們就可以把token傳到後臺
axios.interceptors.request.use(
  config => {
    // console.log('請求路徑', config.url)
    config.headers = {
      'Content-Type': 'application/x-www-form-urlencoded' // 設置跨域頭部
    }
    config.data = Qs.stringify(config.data)
    return config
  },
  err => {
    return Promise.reject(err)
  }
)

// http response 攔截器
axios.interceptors.response.use(
  response => {
    // console.log('請求攔截返回參數', response)
    if (response.status === 200) {
      // 成功
      let returnCode = response.data.code
      if (returnCode > 10000 && returnCode < 20000) {
        // console.log('成功', response)
        Message.success(response.data.msg)
      } else if (returnCode >= 20000 && returnCode < 30000) {
        // 只彈窗，不操作
        // console.log('失敗1', response)
        Message.error(response.data.msg)
      } else if (returnCode >= 30000 && returnCode < 40000) {
        // 只彈窗，點擊跳到登入頁
        localStorage.removeItem('userInfo')

        MessageBox.confirm(response.data.msg, '確定登出', {
          confirmButtonText: '重新登錄',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // console.log('此處應退出登錄  重新實例化')
          router.push({ path: '/login' })
        })
      }
    }
    return response
  },
  error => {
    // console.log('error', error.toString())
    if (
      error.toString().trim() ===
      "TypeError: Cannot read property 'cancelToken' of null"
    ) {
      localStorage.removeItem('userInfo')
      MessageBox.confirm(
        '會話憑證失效，可以取消繼續留在該頁面，或者重新登錄',
        '確定登出',
        {
          confirmButtonText: '重新登錄',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        //  console.log('此處應退出登錄  重新實例化')
        router.push({ path: '/login' })
      })
    }

    // console.log(error.toString().trim())
    if (error.toString().trim() === 'Error: Network Error') {
      MessageBox.alert('網絡請求異常，請稍後重試', '出錯了', {
        confirmButtonText: '確定',
        callback: action => {}
      })
    }
    return Promise.reject(error.response.data)
  }
)

export default axios

/**
 * fetch 請求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function get (url, params = {}) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params
      })
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

/**
 * post 請求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(
      response => {
        // console.log(response.data.code)
        resolve(response.data)
      },
      err => {
        reject(err)
      }
    )
  })
}

/**
 * patch 方法封裝
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.patch(url, data).then(
      response => {
        resolve(response.data)
      },
      err => {
        reject(err)
      }
    )
  })
}

/**
 * put 方法封裝
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.put(url, data).then(
      response => {
        resolve(response.data)
      },
      err => {
        reject(err)
      }
    )
  })
}

在main.js 中全局使用

// main.js 

import { post, get, patch, put } from "./utils/http"

Vue.prototype.$post = post
Vue.prototype.$get = get
Vue.prototype.$patch = patch
Vue.prototype.$put = put

在需要用到的.vue頁面直接使用

//this.logForm 爲傳參
this.$post('你的url', this.logForm).then(req => {
        this.logList = req.data
        this.logList.allCount = req.allCount
        this.logList.nowPage = req.nowPage
        this.logList.pageSize = req.pageSize
        this.loading = false
      }).catch(err => {
        console.log(err)
      })

vue-cli3+element搭建後臺管理項目

一、安裝需要的插件

二、如何在項目中使用以上的插件

三、在項目中封裝axios 請求攔截設置

在vue項目中使用輪詢器《輪詢》

Web前端基礎知識總結

在vue項目中使用driver.js來進行頁面分步引導

vscode開發vue項目自動整理代碼

uni-app快速入手 ——（3）生命週期

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結