基于vue-cli搭建项目

.main{margin-top:20px;填充：30px；框大小：边框框；background:#fff;}1、VueRouter配置创建路由器js文件constframeIn=[{path:'/head1',redirect:{name:'head1-1'},component:layoutHeaderAside,children:[//Home{path:'page1-1',name:'head1-1',meta:{auth:true,title:'第一页'},component:_import('demo/page1')}]},//重组后导出exportdefault[...frameIn,...frameOut,...errorPage]实例化VueRouter对象importVuefrom'vue'importVueRouterfrom'vue-router'//路由数据importroutesfrom'./routes'//exportroutesinmainUseconstrouter=newVueRouter({routes})in.js在main.js中注册路由器importrouterfrom'./router'newVue({router,store,i18n,render:(h)=>h(App),封装路由守卫router.beforeEach(async(to,from,next)=>{//确认多标签页数据已经加载https://github.com/d2-projects/d2-admin/issues/201awaitstore.dispatch('d2admin/page/isLoaded')//确认组件大小设置已经加载https://github.com/d2-projects/d2-admin/issues/198awaitstore.dispatch('d2admin/大小/isLoaded')//进度条NProgress.start()//关闭搜索面板store.commit('d2admin/search/set',false)//验证当前路由的所有匹配都需要登录验证if(to.matched.some((r)=>r.meta.auth)){//暂时使用cookie中是否有token作为验证是否登录的条件//请修改consttoken=util.cookies.get自己业务需要('token')if(token&&token!=='undefined'){next()}else{//未登录时跳转到登录界面//携带页面全路径登录成功后需要重定向next()/*next({name:'login',query:{redirect:to.fullPath}})*///https://github.com/d2-projects/d2-admin/issues/138NProgress.done()}}else{//不需要身份验证直接通过next()}})router.afterEach((to)=>{//进度条NProgress.done()//多页控件打开一个新的页面store.dispatch('d2admin/page/open',to)//改变标题util.title(to.meta.title)})2.侧边栏配置menu.js配置菜单的json数据exportconstmenuAside=supplementPath([{path:'/index',title:'Home',icon:'home'},{title:'/head1',icon:'folder-o',children:[{path:'/page1',title:'page1-1'},{path:'/page2',title:'page1-2'},{path:'/page3',title:'page1-3'}]}，监听路由变化动态生成sidebarwatch:{'$route.matched':{handler(val){constmenuAsideTem=menuAside.find((item)=>{returnitem.title===val[0].path})letaide=[]if(menuAsideTem&&menuAsideTem.children){aide=menuAsideTem.children}this.$store.commit('d2admin/menu/asideSet',aide)}}}效果是如下菜单顶栏同样原理3.vuex统一状态管理state=>basicdata//设置文件importsettingfrom'@/setting.js'exportdefault{namespaced:true,state:{//topbarmenuheader:[],//Sidebarmenuaside:[],官方推荐使用computedattributes访问属性，使用mapStatus辅助函数进一步简化写法。因为使用了模块，所以会包含路径'd2admin/menu'，需要命名空间支持import{mapState}from'vuex'computed:{...mapState('d2admin/menu',['aside','asideCollapse','asideTransition'])},//相当于：computed:{aside(){returnthis.$store.state('d2admin/menu',aside)},//'d2admin/menu'是因为使用了modules，需要支持namespaceexportdefault{namespaced:true,modules}//在其他地方使用状态中的数据this.aside.map(menu=>createMenu.call(this,h,menu))mutations=>提交同步修改mutations:{asideSet(state,menu){//storeassignmentstate.aside=menu}}//在别处提交修改this.$store.commit('d2admin/menu/asideSet',menuAsideTem.children)modules=>统一管理constmoduleA={state:{...},mutations:{...},actions:{...},getters:{...}}constmoduleB={state:{...},mutations:{...},actions:{...}}conststore=newVuex.Store({modules:{a:moduleA,b:moduleB}})get=>处理数据constgetters={getToDo(state){returnstate.todos.filter(item=>item.done===true)//过滤迭代filterwill的值item.done==true一个项目被挑选出来，并返回一个数组}}...mapGetters({todosALise:'getToDo'//getToDo不是字符串，对应getter中的一个方法名//取一个别名todosALise})创建并导出一个vuex对象，方便全局注册importVuefrom'vue'iimportVuexfrom'vuex'//导入vuex的json文件importd2adminfrom'./modules/d2admin'//注册vuexVue.use(Vuex)//创建一个新的vuex对象并importd2adminexportdefaultnewVuex.Store({modules:{d2admin}})4.axios请求封装functioncreateService(){//创建一个axios实例constservice=axios.create()//请求拦截service.interceptors.request.use((config)=>config,(error)=>{//发送失败console.log(error)returnPromise.reject(error)})//响应拦截service.interceptors.response.use((response)=>{//dataAxios是数据常量在axios返回的数据中dataAxios=response.data//这个状态码是和后端约定好的const{code}=dataAxios//根据code判断if(code===undefined){//如果没有code，说明这个不是项目后台开发的比如接口可能是D2Admin请求最新版本returndataAxios}else{//有一段代码是表示这是一个后端接口，可以进一步判断switch(code){case0://[例子]code===0表示没有错误returndataAxios.datacase'xxx'://[示例]其他代码errorCreate(`[code:xxx]${dataAxios.msg}:${response.config.url}`)breakdefault://不正确的代码errorCreate(`${dataAxios.msg}:${response.config.url}`)break}}},(error)=>{conststatus=get(error,'response.status')/*switch(status){case400:error.message='请求错误';breakcase401:error.message='未经授权，请登录';breakcase403:error.message='拒绝访问';breakcase404:error.message=`请求地址错误：${error.response.config.url}`;breakcase408:error.message='请求超时';breakcase500:error.message='内部服务器错误';breakcase501:error.message='servicefailedRealize';breakcase502:error.message='网关错误';breakcase503:error.message='服务不可用';breakcase504:error.message='GatewayTimeout';breakcase505:error.message='不支持HTTP版本';打破默认：打破}*/errorLog(error)returnPromise.reject(error)})returnservice}functioncreateRequestFunction(service){returnfunction(config){//从cookie中获取令牌consttoken=util.cookies.get('token')constconfigDefault={headers:{Authorization:token,'Content-Type':get(config,'headers.Content-Type','application/json')},timeout:3000,baseURL:process.env.VUE_APP_API,数据:{}}返回服务(Object.assign(configDefault,config))}}5。跨域问题proxy:{'/api':{target:'http://192.168.8.11:8080',ws:true,changeOrigin:true,//重写代码pathRewrite:{'^/api/*':''}}}6。scss语法中$符号的使用用于声明可引用的变量$red:red;$g:green;body{p{color:$red;&:hover{颜色：$g;}}}%用于声明可以继承的变量//全局设置一个水平垂直居中的样式%flex-center-row{display:flex;证明内容：居中；对齐项目：居中；弹性直接ction:row;}//在需要的地方继承它。包含{宽度：100%；高度：100%；填充：15px；框大小：边框框；@extend%flex-center-row;}7.基于el-table，对el-table进行二次封装封装，通过传递json来维护表单；