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 });//存储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)
      })