@vue/cli安装

（一）安装

    1、
           1.1、 vue -V  : 先检查vue版本，如果是版本2的，先进行卸载再安装，如果是3的就不用再安装了

    1.2、安装：npm install -g @vue/cli  //如果之前安装过则不用安装

    1.3、创建项目：vue create print-pro  ///项目名

     2、vue ui : 直接用图形化的形式创建（推荐使用）

（二）需要安装的一些插件：（路由、vuex、less 在创建项目的时候已经选择安装上了）

2.1、antd vue :  npm i --save ant-design-vue
			
			在main引入：import Antd from 'ant-design-vue';
				    import 'ant-design-vue/dist/antd.css';
				   Vue.use(Antd)


2.2、nprogress ： npm i nprogress -S (在需要用的时候引入，在permission.js中监听路由的时候引入)
	
2.3、axios：npm i axios -S

2.4、mock(只需要在开发环境使用，正式环境不需要)： npm install mockjs

		import Mock from 'mockjs'

		/*1、 登录 */
		Mock.mock('/api/login','post',(c) => {
		  let data = JSON.parse(c.body)
		  let resp = '' 
		  if (data.userName == '123' && data.password == '123') {
		    resp = {
		      code:"200",
		      token:'12345678910'
		    }
		  } else {
		    resp = {
		      code:'404',
		    }
		  }
		  return resp
		})

（三）需要建的目录：具体可以看下面js文件

①、utils(存放请求的封装request.js) ，
       ②、api(存个个接口)，
       ③、store (存vuex相关的) ，
       ④、mock(存mock.js模拟接口)，
       ⑤、assets里面新建font与images,分别存放ico与图片，页面中操作图片可以用相对路径，如果是需要动态操作的话，可以先用import引入图片，然后绑定:src,在data中操作src
       ⑥、在main同级建permission.js监听路由,来判断session权限后决定路由的跳转

文件：

3.1 commonUtil.js

export function deepClone (target) { // 深度拷贝
  let result // 定义一个变量
  if (typeof target === 'object') { // 如果当前需要深拷贝的是一个对象的话
      if (Array.isArray(target)) { // 如果是一个数组的话
          result = []; // 将result赋值为一个数组，并且执行遍历
          for (let i in target) { // 递归克隆数组中的每一项
              result.push(this.deepClone(target[i]))
          }
      } else if(target===null) { // 判断如果当前的值是null的话；直接赋值为null
          result = null;
      } else if(target.constructor===RegExp){ // 判断如果当前的值是一个RegExp对象的话，直接赋值   
          result = target;
      }else { // 否则是普通对象，直接for in循环，递归赋值对象的所有值
          result = {}; 
          for (let i in target) {
              result[i] = this.deepClone(target[i]);
          }
      }
  } else { // 如果不是对象的话，就是基本数据类型，那么直接赋值
      result = target;
  }
  return result; // 返回最终结果
}

3.2 permission.js

import router from "./router"
import store from "./store"
import NProgress from "nprogress"
import "nprogress/nprogress.css"

NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ["/login"]; //路径白名单，不需要校验
router.beforeEach(async (to, from, next) => {
  NProgress.start()
  if (localStorage.getItem("token")) {  //1、判断token,登录后才会有token,(token是否过期,在request.js中判断，过期返回特定的状态码/特殊的标志)
    store.commit('setToken', localStorage.getItem("token"))
    next()
  } else {
    if (whiteList.indexOf(to.path) != -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
    }
  }
})

router.afterEach(() => {
  NProgress.done();
})

3.3 request.js

import axios from 'axios'
import store from '../store'
import { message } from 'ant-design-vue'
const service = axios.create({
  // baseURL: process.env.NODE_ENV == 'production' ? window.baseApi : process.env.VUE_APP_BASE_API, 
  baseURL:  window.baseApi , 
  timeout:15000
})

service.interceptors.request.use(config => { // 在监听处更新
  localStorage.getItem('token') ? config.headers['token'] = localStorage.getItem('token') : ''  // 请求头加上token
  return config
},
error => {
  return Promise.reject(error)//要把错误返回去，不然不会进入catch
})

service.interceptors.response.use(response => {
  console.log(response)
  if (response.data.code == 4100) { // 需要判断状态码  4100 : token过期
    store.commit('setToken', '')
    localStorage.setItem('token', '')
    message.error('token过期,请重新登录')
    location.reload()
  }
  
  return response
},
error => {
  return Promise.reject(error)
})

export default service