过完年刚上班，总结下忙碌的年前的项目，首先这个是我个人自己从头到尾开发的，中间也遇到一些小问题，总之，对我来说是个提升... 

话不多说，直接上代码

先把后台管理系统的界面截个图吧，要不然直说云里雾里的...

登录页面

内页：赛区配置，还有作品审核，以及管理员用户管理功能

该项目是一个赛事配置系统后台，有管理员的审核，页面的配置，以及多渠道，多语言的切换

1、技术：使用最新的vue全家桶

1、vue-cli3.x +vue全家桶（vuex vue-router axios）

2、框架使用iview

3、插件 qs vue2-editor dayjs nprogress 

4、css预处理器 sass

如图这是些插件

2、从搭整体框架开始

首先 这里我之前写过教程，Vue-cli3.x 配置

3、使用yarn 包管理工具

4、整体目录结构

这里养成习惯，为了以后更好的代码规范吧

5、axios的封装

一个完整的前端项目，必然会利用ajax去调用后台的交互接口，这里，我把我这个项目的axios封装，晒出来，axios是vue官方推荐的一个请求接口的，不支持jsonp ，不过功能已经很强大了， get、 post、put、delete、patch 这些请求方法

import axios from "axios";import { Message } from "iview";import router from "@/router.js";import store from "@/store";// 创建axios实例，同时设置20秒延时时间const ajax = axios.create({timeout: 1000 * 20});const methods = ["patch", "put", "post"];methods.forEach(() => {ajax.defaults.headers["Content-Type"] ="application/x-www-form-urlencoded; charset=UTF-8";});let handleLogin = () => {store.dispatch("isLogin", {loginStatus: false,userInfo: {}});store.dispatch("getActivitySeason", null);sessionStorage.removeItem("activitySeason");sessionStorage.removeItem("userInfo");// 跳转登录页router.replace("/login");};/** * 错误码响应操作及提示 */const errorTip = (duration = 2, content = "") =>Message.error({duration,content});const handleError = (status, message) => {switch (status) {case 400:errorTip(2, `请求出错 - ${message}`);break;case 401:handleLogin(); // token过期自动退出errorTip(2, "token失效，请重新登录");break;case 403: // 无权限sessionStorage.removeItem("userInfo");handleLogin();errorTip(2, "无权限请求，已自动退出");break;case 404:errorTip(2, "请求出错，该接口不存在");break;case 405:errorTip(2, `请求出错 - ${message}`);break;default:errorTip(2, message);break;}};// 添加请求拦截器ajax.interceptors.request.use(config => {if (sessionStorage.getItem("userInfo")) {const AUTH_TOKEN = JSON.parse(sessionStorage.getItem("userInfo")).token;AUTH_TOKEN && (config.headers["Authorization"] = AUTH_TOKEN);}// 在发送请求之前做些什么return config;},error => Promise.reject(error));// 添加响应拦截器ajax.interceptors.response.use(response =>response.status === 200? Promise.resolve(response): Promise.reject(response),// 对响应数据做点什么error => {const { response } = error;if (!response) {Message.error({content: "服务器异常..."});return false;}if (response.status < 500) {handleError(response.status, response.statusText);} else {Message.error({content: response.statusText});}return Promise.reject(response);});export default ajax;复制代码

// 地址的公共jsexport const baseUrl = "/jzds/api/v1/";export const uploadUrl =process.env.VUE_APP_REALEASE === "production"? "//image_upload.mini1.cn/api/image/uploadCommon": "//image-test.mini1.cn/api/image/uploadCommon";复制代码

如何使用呢？

类似这样，封装成一个方法，然后去调用，

最后在集成起来，直接甩给main里面 挂载到vue实例上，

哈哈，这样用起来，也方便，只要把注释注释好，哪些地方使用什么接口，一目了然

6、轻量级的一个日期插件 day.js（2kb）

因为需要有些时间的转换，

例如：

使用day.js 特别好用

这里参考这个

如何使用

// 安装dayjsyarn add dayjs -Simport dayjs from "dayjs";Vue.prototype.$dayjs = dayjs; // 挂载到vue实例上去，全局复制代码

轻量级js日期和时间操作库day.js