搭建vue框架

tianhuhuang
171 阅读3分钟

1、main.js设置

import Vue from 'vue'

// 导入所有全局样式文件（保证所有全局样式在组件样式之前，需要在 App.vue 之前导入）
import '@/assets/scss'

import router from '@/router'
import store from '@/store'
import App from '@/App.vue'
import moment from 'moment'
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

Vue.filter('dateformat', function(dataStr, pattern) {
  if(dataStr == null || dataStr === '') {
    return '--'
  } else {
    return moment(dataStr).format(pattern)
  }
})

Vue.config.productionTip = false

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

2、src中新建文件夹

  1. api //放置调用的api接口
  2. services //放置axios请求时的拦截、响应式的拦截及封装axios调用
  3. store //放置vuex
  4. utils //放置常用的js方法

api文件夹

新建index.js, home.api.js

index.js

import * as homeAPI from './home.api.js' // home

export default {
  homeAPI
}

home.api.js

import Axios, { AxiosConfig } from '@/services/axios'

/**
 * 例子
 * 所有函数中应使用 new AxiosConfig() 来创建配置，并均应返回 Axios 的调用结果
 * @param {Object} data
 * @param {string} data.name
 * @param {number} data.age
 * @return {Promise<any>}
 * @example
 * 使用范例
 * const res = await homeDataApi({name:'Cphayim', age:18})
 */
export function homeDataApi(data) {
  return Axios(
    new AxiosConfig({
      url: 'XXX',
      method: 'POST',
      data
    })
  )
}

axios.js, home.api.js引入了Axios 和 {AxiosConfig}，来自services中的axios文件

/*
 * @Author: Aozhi
 * @Date: 2019-05-12 22:48:53
 * @LastEditTime: 2019-05-31 13:15:54
 * @Description:
 */

import axios from 'axios'
import qs from 'querystring'
import Auth from '../utils/auth'
import router from '@/router'

const isDev = process.env.NODE_ENV === 'development'
const CUSTOM_ENV = process.env.CUSTOM_ENV
// 从暴露的全局配置中获取当前环境对应的配置对象
const globalConfig = NT_CONFIG[isDev ? 'DEV' : (CUSTOM_ENV || 'PROD')]

let layerLoading // 弹出窗口对象

const DEFAULT_OPTIONS = {
  timeout: 10000,
  responseType: 'json',
  // withCredentials: true, // 是否允许带cookie
  headers: { 'Content-Type': 'application/json;charset=utf-8' }
}

const Axios = axios.create(DEFAULT_OPTIONS)

/**
 * 请求时的拦截
 */
Axios.interceptors.request.use(
  config => {
    const token = Auth.getToken()
    // token 存在且请求头中没有 Authorization 字段时添加
    if (token && !config.headers.Authorization) {
      // const random = parseInt(Math.random() * Math.pow(10, 6)).toString()
      config.headers.Authorization = token
      // base64.encode(`${random}:${token}`)
    }
    // 发送请求之前做一些处理
    layerLoading = layer.load(1, { skin: 'layer-load' })
    if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded;charset=utf-8') {
      config.data = qs.stringify(config.data)
      // 'name=a&age=18'
    } else {
      config.data = JSON.stringify(config.data)
      // '{"name":"a", "age": 18}'
    }
    return config
  },
  error => {
    // 当请求异常时做一些处理
    layer.close(layerLoading)
    const errorInfo = error.data.error ? error.data.error.message : error.data
    return Promise.reject(errorInfo)
  }
)

/**
 * 响应时拦截
 */
Axios.interceptors.response.use(
  response => {
    // 返回响应时做一些统一处理
    layer.close(layerLoading)
    if (response.data.code === 401) {
      layer.msg(response.data.msg)
      return router.push('/')
    } else if (response.data.code !== 0) {
      layer.msg(response.data.msg)
    }
    return response.data
  }
  // error => {
  //   layer.close(layerLoading)
  // }
)

export default Axios
export class AxiosConfig {
  /**
   * @param {Object} options
   * @param {string} [options.baseURL] 协议+主机名，不传递将取当前环境（开发/生产）全局配置下的 BASE_URL_MAP.DEFAULT
   * @param {string} options.url 请求路径
   * @param {Object} [options.data = {}] 请求数据
   * @param {Object} [options.headers = {}] 请求头
   */
  constructor({ baseURL, url, method = 'GET', data = {}, headers = {} } = {}) {
    if (!url) {
      throw new RangeError('缺少 url 参数')
    }
    // 如果没有传入 baseURL 使用 GLOBAL_CONFIG 对应当前环境的 DEFAULT 配置
    this.baseURL = baseURL || globalConfig.BASE_URL_MAP.DEFAULT
    this.url = url
    this.method = method
    this.headers = headers
    if (this.method === 'GET') {
      this.params = data
    } else {
      this.data = data
    }
  }
}

Auth又是来自哪个页面呢(utils/auth.js), 里面又是如何设置的呢

export default class Auth {
  static getToken() {
    return sessionStorage.getItem('token')
  }

  static setToken(token) {
    return sessionStorage.setItem('token', token)
  }

  static removeToken() {
    return sessionStorage.removeItem('token')
  }

  static getUsername() {
    return sessionStorage.getItem('username')
  }

  static setUsername(username) {
    return sessionStorage.setItem('username', username)
  }

  static removeUsername() {
    return sessionStorage.removeItem('username')
  }

  static getRemberUsername() {
    return sessionStorage.getItem('remberUsername')
  }

  static setRemberUsername(remberUsername) {
    return sessionStorage.setItem('remberUsername', remberUsername)
  }

  static removeRemberUsername() {
    return sessionStorage.removeItem('remberUsername')
  }
}

但是axios.js中的globalConfig，又来自哪里呢

/**
 *  全局配置文件
 *  暴露在 global.config 中
 *  ! 本文件不经过 babel，请注意 ES6 语法与 API
 *  Author: aozhi
 *  CreatDate: 2019-04-30
 */
; (function () {
  var config = {
    DEV: {
      BASE_URL_MAP: {
        DEFAULT: 'http://XXXX:1233/'
      }
    },

    PROD: {
      BASE_URL_MAP: {
        DEFAULT: '/pro/'
      }
    },
    city: {
      BASE_URL_MAP: {
        DEFAULT: '/city/'
      }
    }
  }
  var g = typeof window ? window : global
  g.NT_CONFIG = config
})();

router中index.js又如何设置呢

import Vue from 'vue'
import Router from 'vue-router'

import routes from './routes'

Vue.use(Router)

const router = new Router({
  base: process.env.BASE_URL,
  routes: routes
})

export default router

./routes中又是如何设置的呢

import authRoutes from './auth.routes'

// import znssRoutes from './znss.routes'
// 404页面
const NotFoundPage = resolve => {
  require.ensure(['@/views/system/pageUndefind.vue'], () => {
    resolve(require('@/views/system/pageUndefind.vue'))
  })
}
const BadPage = resolve => {
  require.ensure(['@/views/system/pageBadGateway.vue'], () => {
    resolve(require('@/views/system/pageBadGateway.vue'))
  })
}

export default [
  {
    path: '*',
    name: 'NotFound',
    component: NotFoundPage,
    meta: { title: '404' }
  },
  {
    path: '/502',
    name: 'Bad',
    component: BadPage,
    meta: { title: '502' }
  },
  {
    path: '/',
    redirect: 'auth/login'
  },
  ...authRoutes
]

页面中又是如何调用api写好的接口事件呢

import Api from '@/api'
async getPersonList() {
      let data
      let config = {
        data: data
      }
      let res = await Api.xtgl.getPersonList(config)
      if(res.code === 0) {
        this.menuArray = res.data
      }
    },
    ```
avatar
文章
阅读
粉丝