笔记vue6项目最佳实践web12瑞客

consthooks=['create','activate','update','remove','destroy']exportfunctioncreatePatchFunction(backend){//const{modules,nodeOps}=backendfor(i=0;i<hooks.length;++i){//cbs['update']=cbs[hooks[i]]=//modules:[attrs,klass,events,domProps,style,transition]for(j=0;j<modules.length;++j){//modules[0]['update']是创建属性执行函数，其他hookif(isDef(modules[j][hooks[i]]))}}//cbs['update']:[fn,fn,fn...}functionpatchVnode(...)if(isDef(data)&&isPatchable(vnode))//每次patchfor(i=0;i<cbs.update.length;++i)if(isDef(i=data.hook)&&isDef(i=i.update))i(oldVnode,}}}<div<div//使用elnewdata:{foo:'foo'},el:"#demo",constapp=new//输出renderƒunctionƒunction{with(this)return_c('div',{attrs:{"id":"demo"}},_c('h1',[_v("Vue.js测试_v("_c('p',}} parseHTML(tempalte,{start(tag,attrs,unary){},//遇到开 end(){},//遇到结束 chars(text){},//遇到文本 comment(text){}//遇到注 代码实现 piler/optimizer.js-exportexportfunctionoptimize(root: ement,options:{if(!root)isStaticKey=genStaticKeysCached(options.staticKeys||'') Tag=options.is Tag||no////markStaticRoots(root,} exportexportfunction(ast: ement|optionsoptions:):CodegenResultconststate=newconstcode=ast?genElement(ast,state):'_c("div")'return{render:`with(this){return${code}}`,staticRenderFns:state.staticRenderFns}}////解析v-functionprocessIf(el)constexp=getAndRemoveAttr(el,'v-if')//获取v-if=“exp"中exp并删除v-ifif(exp)el.if=exp为ast添加ifaddIfCondition(el,{//为ast添加ifConditionsexp:exp,block:else{if(getAndRemoveAttr(el,'v-else')!={el.else=}constelseif=getAndRemoveAttr(el,'v-else-if')if(elseif){el.elseif=}}}functiongenIfConditions(conditions:ASTIfConditions,state:CodegenState,altGen?:Function,altEmpty?:string):stringconstconstconditionconditions.shiftif(condition.exp`(${condition.exp})?${genIfConditions(conditions,state,altGen,}elsereturn}//v-ifwithv-onceshouldgeneratecodelike(a)?_m(0):_m(1)functiongenTernaryExp(el){}} "with(this){return"with(this){return(foo)?_c('h1',[_v(_s(foo))]):_c('h1',[_v("no_v("到这些渲染好的vnodes。对象，着不同名称的插槽以及它们对应的渲染函数，只有在编译和渲染子组件阶段////processSlotContent：处理 tev-constslotBindinggetAndRemoveAttrByRegex(elslotRE)查找v-slot:xxxif(slotBinding){constnamedynamicgetSlotName(slotBindingname是xxxel.slotTarget=name//xxx赋值到slotTargetel.slotTargetDynamic=dynamicel.slotScopeslotBinding.value||emptySlotScopeTokenyyy赋值到}processSlotOutlet：处理if(el.tag==='slot')el.slotName=getBindingAttr(el,'name')//获取slot的name并赋值到}genScopedSlot：这里把slotScopeconstfn=`function(${slotScope}){``return${el.tag=== ?el.if&&?`(${el.if})?${genChildren(el,state)||:genChildren(el,state)||:genElement(el,//constv-slotwithoutscopeon=slotScope?``:return`{key:${el.slotTarget|| npmrun//vue.config.js//vue.config.jsconstport=7070;consttitle="vue项目最佳实践module.exports=publicPath:'/best-practice'部署应用包时的基本URLdevServer:{port: ck://向index.htmlname:}//<title><%= ckCnpmnpmisvg-sprite-loader-////resolveconstpath=functionresolve(dir)returnpath.join(dirname,} ck(config)//配置svg规则排除 //新增icons规则，设置svg-sprite-loader处理 中的..rule("icons")//新增icons.test(/\.svg$/)//test.include.add(resolve("src/icons"include.end()//add完上下文是数组不是icons规则，使用end().use("svg-sprite-loader")//添加use.loader("svg-sprite-loader")//切换上下文为svg-sprite-.optionssymbolId:"icon-[name]"})//为svg-sprite-loader.end();}//////指定requireconstreq=require.context('./svg',false,////import <svg:class="svgClass"aria-hidden="true"v-<use:xlink:href="iconName" exportdefault{name:'SvgIcon',props:{{type:required:true{type:default:''}{iconName()svgClasssvgClass()if(this.className)return'svg-icon'+}elsereturn'svg-}}}}<style.svg-{width:1em;height:1em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;}importimportVuefromimportSvgIconfromponent('svg-icon',<svg-icon<svg-iconicon-class="qq"></svg-constantRoutes和asyncRoutes。importimportVuefromimportRouterfrom"vue-importLayoutfrom'@/layout'exportconstconstRoutes={path:componentimport("@/views/Login"),hidden:true//导航菜单忽略该项{path:component:Layout,//应用布局redirect:"/home",children:{path:"home",component:()=>import(/*wckChunkName:"home"*/"@/views/Home.vue"),name:"home",meta:title:"Home"icon:"qq"//}}]}exportconstasyncRoutes={path:"/about",component:Layout,redirect:"/about/index",children:{path:"index",component:()=>import(/*wckChunkName:"home"*/"@/views/About.vue"),name:"about",meta:title:"About",icon:"qq",roles:['admin',}]}exportdefaultRouter({mode:"history",base:process.env.BASE_URL,routes:constRoutesimportrouterfrom'./router'importstorefrom'./store'import{Message}from'element-import{getToken}from'@/utils/auth'//从获取令牌constwhiist=['/login']//无需令牌白router.beforeEach(async(to,from,next)=>{//consthasToken=if(hasToken)if(to.path==='/login')//next({path:'/'}else//consthasRoles=store.getters.roles&&store.getters.roles.length0ifnext继续即}elsetry//const{roles}=await//constaccessRoutes=awaitstore.dispatch('permission/generateRoutes',roles)//添加这些路由至路由//继续路由切换，确保addRoutesnext({...to,rece:true}catch(error)出错需重置令牌并重新登录（令牌过期、网络错误等原因awaitstore.dispatch('user/resetToken')Message.error(error||'HasError')}}}}elseif(whiist.indexOf(to.path)!==-1)//白路由放}}else}}sfromconstToken=exportfunction{exportfunction{return exportfunction{importimportVuefrom'vue'importVuexfrom'vuex'importpermissionfromimportuserfromconststore=newVuex.Store({modules:{permission,exportdefaultimportimport{getToken,setToken,removeToken}fromconststate{token:getToken(),roles:constmutations={SET_TOKEN:(state,token)=>{state.token=SET_ROLES:(state,roles){state.roles=}constactions=//userlogin({commit},{const{username}=userInfo;returnnewPromise((resolve,reject)=>{setTimeout(()=>if(username==="admin"||username==={commit("SET_TOKEN",username);}elsereject("用户名、错误}},//getusergetInfo({commit,state{returnnewPromise((resolve){setTimeout(()=>constroles=state.token==='admin'?['admin']:['editor']commit("SET_ROLES",roles);},//removetokenresetToken({commit}){returnnewPromise(resolve{commit("SET_TOKEN",commit("SET_ROLES",[]);removeToken();resolve();}exportexport{namespaced:true,permission模块：路由配置信息、路由生成逻辑,import{asyncRoutes,constRoutes}from@roles@routefunctionhasPermission(roles,route)//如果当前路由有roles字段则需判断用户权if(route.meta&&route.meta.roles)//若用户拥有的角色中有被包含在待判定路由角色表中的则拥有returnroles.some(role=>}else//没有设置roles则无需判定即可return}}@routes待过滤路由表，首次传入的就是@rolesexportfunctionfilsyncRoutes(routes,{constres=routes.forEach(route=>//一consttmp={...route//如果用户有权则加入结果路由if(hasPermission(roles,tmp))//if(tmp.children)tmp.children= syncRoutes(tmp.children,}}return}consts