起步

• 项目搭建，利用 vue-cle

  • 搭建命令 vue init webpack my-project (一般都用webpack模板)

• 必备插件 vuex axios

  • 安装 npm i vuex axios -S

初始配置

1. 异步请求配置

• 找到 confi/index.js,在 proxyTable对象输入一下代码：

  
  proxyTable: {
    '/': {
      target: 'http://192.168.22.46'
    }
  },
  
  

• axios 异步请求拦截以及异常处理

api.js

import axios from 'axios'

// http requser 拦截器
axios.interceptors.request.use((config) => {
    return config
}, (err) => {
    alert('请求超时')
    return Promise.resolve(err)
})

// 响应拦截， 异常处理
axios.interceptors.response.use((data) => {
    return data
}, (err) => {
    if (err && err.response) {
        switch (err.response.status) {
            case 400:
                alert('错误请求')
            break;
            case 401:
                alert('未授权，请重新登录')
                break;
            case 403:
                alert('拒绝访问')
                break;
            case 404:
                alert('请求错误,未找到该资源')
                break;
            case 405:
                alert('请求方法未允许')
                break;
            case 408:
                alert('请求超时')
                break;
            case 500:
                alertalert('服务器端出错')
                break;
            case 501:
                alert('网络未实现')
                break;
            case 502:
                alert('网络错误')
                break;
            case 503:
                alert('服务不可用')
                break;
            case 504:
                alert('网络超时')
                break;
            case 505:
                alert('http版本不支持该请求')
                break;
            default:
                alert(`连接错误${err.response.status}`)
        }
    } else {
        alert('服务器连接失败')
    }
})

/**
 *  封装 get 方法
 *  @returns { Promise }
 */

 export function get(url, params = {}) {
     return new Promise((resolve, rejects) => {
         axios.get(url, {
             params: params
         }).then((res) => {
             resolve(res.data)
         }).catch((err) => {
             rejects(err)
         })
     })
 }

 /**
  *  封装 post 方法
  *  @returns { Promise }
  */

  export function post(url, params ={}) {
      return new Promise((resolve, reject) => {
          axios.post(url, params).then((res) => {
              resolve(res.data)
          }).catch((err) => {
              reject(err)
          })
      })
  } 

  /**
   *  获取接口方法
   */

   export const server = {
       login (paramsObj) {
           return get('/login', paramsObj)
       }
   }

• main.js全局添加

// api 接口
import {server} from 'api/api'
// 添加 server 接口
Vue.prototype.$server = server

• 用法

const paramsObj = {
    username: 'admin',
    password: 123456
}

this.$server.login(paramsObj).then((res) => {
    console.log(res)
})

2. 路由拦截配置

// main.js
router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    sessionStorage.removeItem('user');
  }
  let user = JSON.parse(sessionStorage.getItem('user'));
  if (!user && to.path != '/login') {
    next({ path: '/login' })
  } else {
    next()
  }
})

3. UI框架安装

• 安装命令

npm i element-ui -S

• 全局引入

// main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

4. 组件标题

// 组件网站标题
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})