vue2项目---初始化

axios封装

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'

const service = axios.create({
//创建axios实例,多了以下配置
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    // 知识点: js文件中能否使用this.$store?
    // 不能, 因为这个this关键字不是Vue组件对象, 无法查找原型链上$store
    // 但是this.$store为了拿到的是store/index.js导出store对象
    // 解决: 我们直接把store对象导入过来使用, 是同一个store对象
    const token = store.getters.token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {// 响应成功2xx, 3xx
    const { success, message } = response.data
    if (success) {
      return response.data
    } else {
      Message.error(message) // http状态码2xx, 但是逻辑错误
      return Promise.reject(new Error(message)) // 返回Promise错误的对象, 等同reject() -> 自己根据success字段判断逻辑错误(账号密码错误)
    }
  },
  error => {
 // 4xx.5xx进入
    Message.error(error.response.data.message)
    //token超时的错误码是10002
    if (error.response && error.response.data && error.response.data.code === 10002) {
      store.commit('user/REMOVE_TOKEN')

      
      store.commit('user/RESET_STATE')
      
      router.replace(`/login?redirect=${encodeURIComponent(router.currentRoute.fullPath)}`)
    }
    return Promise.reject(error)
  }
)

export default service

``
```javascript
//api.js
import request from '@/utils/request'

// 获取权限列表
export function getPermissionListAPI() {
//返回promise对象,通过.then/.catch获取结果
  return request({
    url: '/sys/permission'
  })
}

配置路由

vue2，只能结合 vue-router 3.x 版本才能使用

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

import Layout from '@/layout'

const routes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },

  { path: '*', redirect: '/404', hidden: true }
]

// 创建路由实例
const router = new Router({
  mode: 'history', // 使用 history 模式，去掉 URL 中的 #
  routes // 注入路由规则
});

export default router;

//main.js
import Vue from 'vue'
import App from './App.vue'

// 引入router
import router from './router'

Vue.config.productionTip = false

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

配置vuex

写法一:根store里的(不分模块的时候)

• 取state里的xxx变量值:$store.state.xxx
• 调用mutations方法:$store.commit(‘方法名’,值)
• 调用actions方法:$store.dispatch(‘方法名’,值)
• 调用getters变量:$store.getters.xxx

写法二:分模块(不开命名空间) namespaced:true没写

• 只影响state的取值方式 $store.state.模块名.xxx
• mutations和actions和getters还像以前一样使用

写法三:分模块(开命名空间)使用时, 要带模块名(命名空间名)

• 取state里的xxx变量值:$store.state.模块名.xxx
• 调用mutations方法:$store.commit(‘模块名/方法名’,值)
• 调用actions方法:$store.disptch(‘模块名/方法名’,值)
• 调用getters变量:$store.getters[‘模块名/xxx’]

//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
         app,//侧边栏对象, 设备型号
    settings, // 侧边栏有logo? 头部是否固定定位
    user // token, name, 等用户信息
  },
  getters
})

export default store

//main.js
import Vue from 'vue'
import App from './App.vue'
// 引入router文件夹
import router from './router'
Vue.config.productionTip = false

//引入store
import store from './store'

new Vue({
 render: h => h(App),
 router,//注册路由：组件实例的身上多了一个$router属性
 store //注册仓库：组件实例的身上多了一个$store属性
}).$mount('#app')

//getters.js
const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token, // 返回用户token
  avatar: state => state.user.userInfo.staffPhoto, // 返回用户头像地址
  name: state => state.user.userInfo.username, // 返回用户名
  companyId: state => state.user.userInfo.companyId // 公司 ID
}
export default getters

module/user.js
import { getToken, setToken, removeToken } from '@/utils/auth'
import { loginAPI, getUserProfileAPI, getUserPhotoAPI } from '@/api'

const getDefaultState = () => {
  return {
    token: getToken(), // 用户 Token，默认为 ''
    userInfo: {}
  }
}
const state = getDefaultState()

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },
  // 设置token
  SET_TOKEN(state, newToken) {
    state.token = newToken
    setToken(newToken)
  },
  // 删除token
  REMOVE_TOKEN(state) {
    state.token = ''
    removeToken()
  },
  SET_USER(state, value) {
    state.userInfo = value
  },
  // 删除用户信息
  REMOVE_USER(state) {
    state.userInfo = {}
  }
}

const actions = {
  // 登录逻辑-封装
  async loginActions({ commit }, value) {
    try {
      const res = await loginAPI(value)
      // 我们只需要token, 保存到上面的vuex中
      commit('SET_TOKEN', res.data)
      // 逻辑页面还在接收数组, 外面写成功/失败的逻辑, 所以这里要把数组返回出去
      // return到actions调用的地方(login/index.vue)
      return res
    } catch (err) {
      return Promise.reject(err)
    }
  },
  // 获取用户-信息
  async getUserInfoActions({ commit }) {
    const { data: userObj } = await getUserProfileAPI() // 获取用户基本资料对象
    const { data: photoObj } = await getUserPhotoAPI(userObj.userId) // 获取用户头像等

    const newObj = { ...userObj, ...photoObj } // 合并一个信息非常全的对象
    commit('SET_USER', newObj) // 保存到vuex的userInfo对象上 -> 一会儿用调试工具查看
  },
  // 退出登录
  async logOutActions({ commit },{参数}) {
    commit('REMOVE_TOKEN',参数)
    commit('RESET_STATE')
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

配置自定义icons文件

index.js

//   src/icons/index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
Vue.component('svg-icon', SvgIcon)
//require.context是webpack内置api,用于自动化导入模块
//参数1:要读取的文件夹路径
//参数2:是否遍历子目录
//参数3:符合正则的才会导入,.svg结尾的文件
const req = require.context('./svg', false, /\.svg$/)
//console.log(reg)
//function webpackContext(req){}
//req=requireContext
//console.log(requireContext.keys())//自动化导入的文件名
//['./dashboard.svg','./example.svg',...]
//每个要引入的文件名传入req,进行webpack引入
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

main.js

import '@/icons'

SvgIcon组件

1.svg里的use,同源策略,不能使用外链地址
2.v-on=“$listeners” 是一个特殊的语法，用于将父组件传递下来的所有事件监听器绑定到子组件上。这里的 $listeners 是一个对象，包含了父组件传递给子组件的所有事件监听器

• <svg-icon @click=“btn” @test=“fn”> </svg-icon
• $ listeners:{click:btn,test:fn}
• v-on="{}"快速给所在标签同时绑定多个事件和相应处理函数

3.aria-hidden=“true” 计算机朗读标签时不要读svg

//  components/SvgIcon/index.vue
<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
import { isExternal } from '@/utils/validate'

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
  //是否为外链user eye
    isExternal() {
      return isExternal(this.iconClass)
    },
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover!important;
  display: inline-block;
}
</style>

isExternal方法

//判断是否为外链地址
export function isExternal(path){
return /^(https?:|mailto:|tel:)/.test(path)
}

使用组件

<svg-icon icon-class="fullscreen" class="fullscreen" />

引入element-ui

npm i element-ui -S
npm install babel-plugin-component -D按需引入

//main.js
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

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

//.babelrc 修改为
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

utils

cookie缓存

import Cookies from 'js-cookie'
const TokenKey = 'hrsaas-ihrm-token' // 设定一个独一无二的key

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

getPageTitle

import defaultSettings from '@/settings'

const title = defaultSettings.title || 'Vue Admin Template'

export default function getPageTitle(pageTitle) {
  if (pageTitle) {
    return `${pageTitle} - ${title}`
  }
  return `${title}`
}

格式化时间,

/**
 * Created by PanJiaChen on 16/11/18.
 */

/**
 * Parse the time to string
 * @param {(Object|string|number)} time
 * @param {string} cFormat
 * @returns {string | null}
 */
 //格式化时间对象
export function parseTime(time, cFormat) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string')) {
      if ((/^[0-9]+$/.test(time))) {
        // support "1548221490638"
        time = parseInt(time)
      } else {
        time = time.replace(new RegExp(/-/gm), '/')
      }
    }

    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000//秒转成毫秒
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
    const value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
    return value.toString().padStart(2, '0')//给月日时分秒为1位时,前面补0
  })
  return time_str
}

/**
 * @param {number} time
 * @param {string} option
 * @returns {string}
 */
export function formatTime(time, option) {
  if (('' + time).length === 10) {
    time = parseInt(time) * 1000//秒转毫秒
  } else {
    time = +time//数字
  }
  const d = new Date(time)
  const now = Date.now()//当前时间戳毫秒

  const diff = (now - d) / 1000//秒

  if (diff < 30) {
    return '刚刚'
  } else if (diff < 3600) {
    // less 1 hour
    return Math.ceil(diff / 60) + '分钟前'  //向上取整
  } else if (diff < 3600 * 24) {
    return Math.ceil(diff / 3600) + '小时前'
  } else if (diff < 3600 * 24 * 2) {
    return '1天前'
  }
  if (option) {//格式化时间
    return parseTime(time, option)
  } else {
    return (//自己拼接
      d.getMonth() +
      1 +
      '月' +
      d.getDate() +
      '日' +
      d.getHours() +
      '时' +
      d.getMinutes() +
      '分'
    )
  }
}

/**
 * @param {string} url
 * @returns {Object}
 */
 //查询字符串对象
export function param2Obj(url) {
  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')//拿到参数字符串
  if (!search) {
    return {}
  }
  const obj = {}
  const searchArr = search.split('&')
  searchArr.forEach(v => {
    const index = v.indexOf('=')
    if (index !== -1) {
      const name = v.substring(0, index)
      const val = v.substring(index + 1, v.length)
      obj[name] = val
    }
  })
  return obj
}

/**
 * 把扁平结构的数据, 转成树形控件
 * @param {*} list
 * @param {*} rootValue
 * @returns
 */
export function transTree(list, rootValue) { // list: 整个数组, rootValue本次要查找的目标id -> 此函数为了找到rootValue目标id的下属们
  const treeData = [] // 装下属对象的
  list.forEach(item => {
    if (item.pid === rootValue) { // 当前对象pid符合, 继续递归调用查找它的下属
      const children = transTree(list, item.id) // 返回item对象下属数组
      if (children.length) {
        item.children = children // 为item添加children属性保存下属数组
      }
      treeData.push(item) // 把当前对象保存到数组里, 继续遍历
    }
  })
  return treeData // 遍历结束, rootValue的id对应下属们收集成功, 返回给上一次递归调用children, 加到父级对象的children属性下
}

// 把excel文件中的日期格式的内容转回成标准时间
export function formatExcelDate(numb, format = '/') {
  const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000)

  time.setYear(time.getFullYear())
  const year = time.getFullYear() + ''
  const month = time.getMonth() + 1 + ''
  const date = time.getDate() + ''
  if (format && format.length === 1) {
    return year + format + month + format + date
  }
  return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}

validate

/**
 * Created by PanJiaChen on 16/11/18.
 */

/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

/**
 * 验证手机号
 * @param {string} str 账号-手机号
 * @returns {Boolean} 通过校验为true, 否则为false
 */
export function validMobile(str) {
  return /^1[3-9]\d{9}$/.test(str)
}

main.js

import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

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

// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

// // 导入组件
// import PageTools from '@/components/PageTools'

// // 注册组件
// Vue.component('PageTools', PageTools)

// 导入组件
import GlobalComponents from '@/components/index.js'
Vue.use(GlobalComponents)

Vue.config.productionTip = false

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

permission权限控制

import router from './router'
import store from './store'
// 导入进度条插件
import NProgress from 'nprogress'
// 导入进度条样式
import 'nprogress/nprogress.css'
import getPageTitle from '@/utils/get-page-title'

// 白名单数组
const whiteList = ['/login', '/404']

// 前置路由守卫
router.beforeEach((to, from, next) => {
  NProgress.start()
  // 获取到 token
  const token = store.getters.token

  // 如果存在 token
  if (token) {
    if (to.path === '/login') {
      // 如果存在 token，访问的是登录页面，直接跳转到主页
      next('/')
      NProgress.done()
    } else {
      // 如果存在 token，访问的是其他页面，直接放行
      next()
      if (!store.getters.name) { store.dispatch('user/getUserInfoActions') }
    }
  } else {
    // 如果不存在 token，访问的是白名单内容，直接放行
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 没有 token，且不是白名单页面，跳转到登录页面
      next('/login')
      NProgress.done()
    }
  }
})

// 后置路由守卫
router.afterEach((to, from) => {
  document.title = getPageTitle(to.meta.title)
  // 隐藏进度条效果
  NProgress.done()
})

开发环境的跨域代理

//.env.development
VUE_APP_BASE_API = '/api'```

//vue.config.js
module.exports = {
  devServer: {// 里面新增
    // before: require('./mock/mock-server.js'), // 注释线上地址
    // 代理配置
    proxy: {
      // 这里的 api 表示如果我们的请求地址以 /api 开头的时候，就出触发代理机制
      '/api': {
        target: 'http://ihrm.itheima.net', // 需要代理的地址
        changeOrigin: true // 是否跨域，需要设置此值为 true 才可以让本地服务代理我们发出请求
      }
      // 这里没有pathRewrite, 因为后端接口就是ihrm.itheima.net/api这种格式,所以不需要重写
    }
  }
}