过完年刚上班，总结下忙碌的年前的项⽬，⾸先这个是我个⼈⾃⼰从头到尾开发的，中间也遇到⼀些⼩问题，总之，对我来说是个提升... 话不多说，直接上代码
先把后台管理系统的界⾯截个图吧，要不然直说云⾥雾⾥的...
登录页⾯
内页：赛区配置，还有作品审核，以及管理员⽤户管理功能 该项⽬是⼀个赛事配置系统后台，有管理员的审核，页⾯的配置，以及多渠道，多语⾔的切换
1、技术：使⽤最新的vue全家桶
1、vue-cli3.x +vue全家桶（vuex vue-router axios）
2、框架使⽤iview
3、插件 qs vue2-editor dayjs nprogress
4、css预处理器 sass
如图这是些插件
2、从搭整体框架开始
⾸先 这⾥我之前写过教程，
3、使⽤yarn 包管理⼯具
hp小型机4、整体⽬录结构
富士j25
这⾥养成习惯，为了以后更好的代码规范吧
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秒延时时间con 复制代码 /
/ 地址的公共js
export const baseUrl = "/jzds/api/v1/";export const uploadUrl = v.VUE_APP_REALEASE === "production" ? "//image_upload.mini1/api/image/uplo 如何使⽤呢？
调值公式法类似这样，封装成⼀个⽅法，然后去调⽤，
最后在集成起来，直接甩给main⾥⾯ 挂载到vue实例上，
哈哈，这样⽤起来，也⽅便，只要把注释注释好，哪些地⽅使⽤什么接⼝，⼀⽬了然
6、轻量级的⼀个⽇期插件 day.js（2kb）穆勒五法
因为需要有些时间的转换，
例如：
使⽤day.js 特别好⽤
这⾥参考这个
如何使⽤
// 安装dayjs
百度新知
yarn add dayjs -S
import dayjs from "dayjs";Vue.prototype.$dayjs = dayjs; // 挂载到vue实例上去，全局复制代码
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议