vue09課件筆記項目最佳實踐

vue-element-constconstport=module.exports=publicPath'/best-practice'部署應(yīng)?包時的基本URLdevServer:{}配置wck： constconstmodule.exports={ {resolve:{alias:{comps:path.join(dirname,}}}} modulemodule.exports{ ck:name:"vue項?最佳實踐}<title><%<title><%=ckC 傳遞?個函數(shù)給// ck:config=> ps=path.join(dirname,if(process.env.NODE_ENV==='development')'vue項?最佳實踐}else='VueBest}}配置wck： 范例：svgicon引?npmnpmisvg-sprite-loader-resolveconstpath=functionresolve(dir)returnpath.join(dirname,} ck(config)配置svg規(guī)則排除icons?錄中svg?標(biāo)給svg規(guī)則增加?個排除選項新增icons規(guī)則，設(shè)置svg-sprite-loader處理icons?錄中的svg.options({symbolId:'icon-} <usexlink:href="#icon-wx" importconstconstreq=require.context('./svg',false,/\.svg$/) <svg:class="svgClass"v-<use:xlink:href="iconName" exportdefault{name:'SvgIcon',props:{{required:true{default:''}{iconName()return`#icon-svgClass()if(this.className)return'svg-icon'+}else}}}}<style{width:1em;height:1em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;}、是是.env.development"serve""serve":"vue-cli-serviceserve--mode路由分為兩種：constantRoutes和asyncRoutes，前者是默認(rèn)路由可直接，后者中定義的路由獲取?戶??，判斷?戶是否擁有權(quán)限，permission.js引?importstorefromrouter.beforeEach(async(to,from,next)=>//if(hasToken)if(to.path==='/login'){}else{//consthasRoles=store.getters.roles&&store.getters.roles.length>if(hasRoles)}{tryconstconst{roles}=await//根據(jù)當(dāng)前?戶??過濾出 constaccessRoutes=awaitstore.dispatch('permission/generateRoutes',roles)繼續(xù)路由切換，確保addRoutesnext({...to, ce:true}catch(error)//awaitalert(error||'未知錯誤')}}}}else未登錄}constmap=//xx:require('@/views/xx.vue').defaultxx=> }服務(wù)端返回的asyncRoutesconstasyncRoutes=[{path:'/xx',component:'xx',...]//遍歷asyncRoutes，將component替換為map[component] ponent(asyncRoutes){asyncRoutes.forEach(route ponent ponent];{route.children.map(child }}<el-tab-panelabel="?戶管理name="first"v-permission="['admin',<el-tab-panelabel="配置管理name="second"v-permission="['admin',<el-tab-panelabel="??管理name="third"v-<el-tab-panelabel="定時任務(wù)補償"name=" <el-tab-panev- exportdefault{methods:{{returnroles.some(role=>return}}} api服務(wù)=>axios請求=>本地mock/線上mock/服務(wù)器npmiaxios-npmiaxios-本地mock：利?wck-dev-server提供的before鉤?可以express實例，從?定義接線上esay-若不可?，可以搭建本地easy-mock服務(wù)（nvm+node+redis+mongodb）先安裝node8.x、redis和mongodb切nodev8nvmlistnvmuse起redis：redis-起mongodb：起easy-mocknpmrun////{"code":{const{username}if(username==="admin"||username==={return}{return}"data":{const{username}if(username==="admin"||username==={return}{return//{code:"data":function({_req})return_req.headers['authorization'].split('')[1]==='admin'?['admin']:['editor']}}VUE_APP_BASE_APIVUE_APP_BASE_API='

/57code/vue-study/tree/step-gitgitfetchoriginstep-7gitreset--hardstep-UnitTestingE2E集成Jestvueadd@vue/unit-集成cypressvueadd@vue/e2e-新建test/unit/kaikeba.spec.js，*.spec.jsfunctionfunctionadd(num1,{returnnum1+}//測試套件testsuitedescribe('Kaikeba'{//測試?例testcaseit('測試add函數(shù)'{//斷?assertexpect(add(1expect(add(1,expect(add(-2,npmrunvue官?提供了?于單元測試的實??具庫@vue/test- importKaikebaimportKaikebafromdescribe('Kaikeba.vue',()=>it('要求設(shè)置created?命周期'expect(typeofit('message初始值是vue-test'檢查dataexpect(typeof檢查dataconstdefau ata=Kaikeba.data() importimport{mount}from'@vue/test-it("mount之后測data是開課吧"{constwrapper=mount(Kaikeba);it("按鈕點擊后"constwrapper=測試html"jest""jest":"collectCoverage":true,"collectCoverageFrom":["src/**/*.{js,vue}"],}modulemodule.exports{"collectCoverage":true,}在此執(zhí)?npmrun%stmts是語句覆蓋率（statementcoverage）： <span>{{message<button@click="changeMsg">點擊 exportdefault{data(){returnmessage:"vue-text",count:0created()this.message"開課吧{changeMsg()if(this.count>1)thisthis.message"count?于}elsethis.message"按鈕點擊}{this.count+=}}VueTestUtils使?指南E2E運?E2Enpmnpmrundescribedescribe('端到端測試，搶測試?員的飯碗'{it(' ?下',()=>//cy.contains('h1',' etoYourVue.jsApp')cy.contains('span','開課吧')<div<div<imgalt="Vuelogo"<!-- oWorld etoYourVue