(一)安装
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