技术栈本项目采用Vue+ElementUI+Axios+Vue-Router+VuexElementUI第一章大厂背书为什么选择elementui：虽然只有两个核心开发还是三个人，但至少不用担心哪天维护不住，和小姑子私奔了。2016年3月13日，Element悄然诞生。经过4年的风风雨雨，我们从饿了么的内部业务组件库成长为Vue生态。最流行的UI组件库之一。持续迭代：Element已经实现了48,200GithubStar和950,000NPM月下载量。超过530名社区贡献者参与了维护，共同完成了4400次提交更新迭代。生态优秀，社区活跃：贡献者超过250人，社区中也有很多基于element-ui的扩展组件，相关的qq讨论群或gitter也很多。社区认可度：目前Element已经是Vue相关star最多的开源项目，体现了社区的认可度。2.安装npmnpmielement-ui-D3。'element-ui';导入'element-ui/lib/theme-chalk/index.css';从'./App.vue'导入应用程序;Vue.use(ElementUI);newVue({el:'#app',渲染：h=>h(App)});按需导入，即只导入需要的组件（推荐）{Vue.use(item)})Axios一、为什么选择AxiosAxios是一个基于promise的HTTP库，可以在浏览器和node.js中使用，具有以下特点：从浏览器创建XMLHttpRequests从node.js创建http请求支持PromiseAPI拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御XSRF2。Ajax本身的缺点是针对MVC编程，不符合前端的MVVM浪潮，是基于原生XHR开发的。XHR本身的结构并不清晰。已经有fetch的替代方法。整个jquery项目太大了。Service)ajax不支持浏览器的后退按钮。安全问题。Ajax公开了与服务器交互的细节。对搜索引擎的支持相对较弱。破坏程序的异常机制不容易调试。事件跟踪的输出和状态混合在一个对象中。fetchtch只报告网络请求的错误，并将400和500视为成功请求。需要封装处理fetch。h不支持abort，不支持超时控制。使用setTimeout和Promise.reject实现的超时控制无法阻止请求进程在后台继续运行，造成体量的浪费。Fetch没有办法原生监控请求的进度，而XHR可以安装插件npmiaxios--save-dev新增量request手柄新增量文件utils/request.jsimportaxiosfrom'axios'import{Message}from'element-ui'importstorefrom'@/store'import{getToken}from'@/utils/auth'//创建一个axios实例constservice=axios.create({baseURL:'/api',//url=baseurl+requesturl//withCredentials:true,//交叉时发送cookiedomainrequeststimeout:5000//请求超时})//请求拦截器service.interceptors.request.use(config=>{//在请求发送之前做一些事情if(store.getters.token){//让每个请求都携带token//['X-Token']为自定义headerskey//请根据实际情况修改config.headers['X-Token']=getToken()}returnconfig},error=>{//do有请求错误的东西console.log('requesterror'+error)//用于调试returnPromise.reject(error)})//responseinterceptorservice.interceptors.response.use(/***如果想获取http的headers或者status等信息*请返回response=>response*//***通过自定义code判断请求状态*这里只是举例*也可以通过HTTPStatusCode判断状态*/response=>{//这里根据需求处理异常returnresponse},error=>{console.log('error===='+error.message)//fordebugMessage({message:error.message,type:'error',duration:5*1000})returnPromise.reject(error)})exportdefaultserviceaddapi/api.jsexportdefault{//验证管理员信息接口validateAdminUsers:'/login/validateAdminUsers'}添加api/index.jsimportapifrom'./api'importrequestfrom'@/utils/request'letinter={//管理员信息请求接口validateAdminUsers:data=>{returnrequest.post(api.validateAdminUsers,data)}}exportdefaultinter配置跨域需求config/index.js//配置跨域请求proxyTable:{'/api':{target:requestedurl地址,changeOrigin:true,pathRewrite:{'^/api':''}}},Vue-RouterVueRouter是Vue.js官方的路由管理器。它与Vue.js的核心深度集成，可以轻松构建单页应用程序。关于路由管理的配置，小编会在单独的博客中更新，敬请期待。VuexVuex是专门为Vue.js应用开发的状态管理模式。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。关于Vuex的配置说明，小编会在单独的博客中更新，敬请期待。参考github：elementelement官方文档vue-routervuex
