筆記vue6項(xiàng)目最佳實(shí)踐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']是創(chuàng)建屬性執(zhí)行函數(shù)，其他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(){},//遇到結(jié)束 chars(text){},//遇到文本 comment(text){}//遇到注 代碼實(shí)現(xiàn) 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。對象，著不同名稱的插槽以及它們對應(yīng)的渲染函數(shù)，只有在編譯和渲染子組件階段////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項(xiàng)目最佳實(shí)踐module.exports=publicPath:'/best-practice'部署應(yīng)用包時的基本URLdevServer:{port: ck://向index.htmlname:}//<title><%= ckCnpmnpmisvg-sprite-loader-////resolveconstpath=functionresolve(dir)returnpath.join(dirname,} ck(config)//配置svg規(guī)則排除 //新增icons規(guī)則，設(shè)置svg-sprite-loader處理 中的..rule("icons")//新增icons.test(/\.svg$/)//test.include.add(resolve("src/icons"include.end()//add完上下文是數(shù)組不是icons規(guī)則，使用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//導(dǎo)航菜單忽略該項(xiàng){path:component:Layout,//應(yīng)用布局redirect:"/home",children:{path:"home",component:()=>import(/*wckChunkName:"home"*/"@/views/Home.vue"),name:"home",meta:title:"Home"icon:"qq"http://}}]}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繼續(xù)即}elsetry//const{roles}=await//constaccessRoutes=awaitstore.dispatch('permission/generateRoutes',roles)//添加這些路由至路由//繼續(xù)路由切換，確保addRoutesnext({...to,rece:true}catch(error)出錯需重置令牌并重新登錄（令牌過期、網(wǎng)絡(luò)錯誤等原因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)//如果當(dāng)前路由有roles字段則需判斷用戶權(quán)if(route.meta&&route.meta.roles)//若用戶擁有的角色中有被包含在待判定路由角色表中的則擁有returnroles.some(role=>}else//沒有設(shè)置roles則無需判定即可return}}@routes待過濾路由表，首次傳入的就是@rolesexportfunctionfilsyncRoutes(routes,{constres=routes.forEach(route=>//一consttmp={...route//如果用戶有權(quán)則加入結(jié)果路由if(hasPermission(roles,tmp))//if(tmp.children)tmp.children= syncRoutes(tmp.children,}}return}consts