38Vue入门教程Element美化TODO项目

　　1。前言
　　本小节我们将带大家利用Element一起优化我们的TODO项目。2。Element简介
　　Element是一套为开发者、设计师和产品经理准备的基于Vue2。0的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。3。编写路由
　　首先，我们需要定义两个路由，分别是待办事项列表页面和添加待办事项页面。我们可以打开‘routerindex。js’文件进行如下配置：importVimportVueRimportListfrom。。viewsList。importAddfrom。。viewsAdd。Vue。use（VueRouter）；constroutes〔｛path：list，name：list，component：List，alias：｝，｛path：add，name：home，component：Add｝〕；constrouternewVueRouter（｛routes｝）；4。入口文件
　　要使用Element首先我们需要通过npm安装Element：npminstallelementuisave
　　安装完成之后，我们需要修改main。jsimportVimportAppfrom。App。importrouterfrom。importstorefrom。Vue。config。productionTimportElementUIimportelementuilibthemechalkindex。Vue。use（ElementUI）；newVue（｛router，store，render：hh（App）｝）。mount（app）；5。使用Vuex保存数据5。1创建mutationtypes（storetypes。js）exportconstINITTODOINITTODO；exportconstADDTODOADDTODO；exportconstDELTODODELTODO；exportconstCOMPLETETODOCOMPLETETODO；5。2创建store（storeindex。js）importVimportVVue。use（Vuex）；import｛ADDTODO，DELTODO，COMPLETETODO，INITTODO｝from。exportdefaultnewVuex。Store（｛state：｛list：〔〕｝，getters：｛count：stateisComplete｛returnstate。list。filter（itemitem。isCompleteisComplete）。｝，todoList：state｛returnstate。｝｝，mutations：｛〔INITTODO〕（state，payload）｛state。listpayload。｝，〔ADDTODO〕（state，payload）｛state。list。push（payload）；｝，〔DELTODO〕（state，payload）｛constindexpayload。state。list。splice（index，1）；｝，〔COMPLETETODO〕（state，payload）｛constindexpayload。state。list〔index〕。isComplete1；｝｝，actions：｛initList（｛commit｝）｛axios。get（todolist）。then（res｛commit（INITTODO，｛list：res。data。data｝）；｝）；｝｝｝）；6。改造App。vuetemplateelcontainerstyleheight：100；border：1pxsolideeeelasidewidth200pxstylebackgroundcolor：rgb（238，241，246）elmenurouterelmenuitemindexlisticlasseliconmenuispanslottitle待办列表spanelmenuitemelmenuitemindexaddiclasseliconcircleplusoutlineispanslottitle添加待办spanelmenuitemelmenuelasideelcontainerelmainrouterviewelmainelcontainerelcontainertemplatestylelangscss｛padding：0；margin：0；｝app｛height：100；｝style7。编写列表页面（viewslist。vue）templateeltableclasseltable：datatodoListborderstylewidth：100：rowclassnametableRowClassNameeltablecolumnfixedpropnamelabel事项名称width150eltablecolumneltablecolumnpropdatelabel事项截止时间width120eltablecolumneltablecolumnproptypelabel事项类型width120eltablecolumneltablecolumnpropurgentlabel是否紧急width120templateslotscopescopespan｛｛scope。row。urgenturgentText｝｝spantemplateeltablecolumneltablecolumnpropcontentlabel事项详情eltablecolumneltablecolumnlabel操作width160templateslotscopescopeelbuttonclickhandleDelete（scope。index）typedangersizesmall删除elbuttonelbuttontypeprimarysizesmallclickhandleComplete（scope。index）：disabledscope。row。isComplete1完成elbuttontemplateeltablecolumneltable总共：｛｛todoList。length｝｝个任务。已完成：｛｛count（1）｝｝个任务。未完成：｛｛count（0）｝｝个任务。templatestyle。eltable。completerow｛background：f0f9｝style8。编写添加事项页面templateelformrefform：modelform：rulesruleslabelwidth180pxelformitempropnamelabel事项名称：elinputvmodelform。nameelinputelformitemelformitempropdatelabel事项截止时间：eldatepickertypedateplaceholder选择日期vmodelform。datevalueformatyyyyMMddstylewidth：100；eldatepickerelformitemelformitemproptypelabel事项类型：elselectvmodelform。typeplaceholder请选择活动区域stylewidth：100；eloptionlabel学习value学习eloptioneloptionlabel工作value工作eloptioneloptionlabel游戏value游戏eloptionelselectelformitemelformitempropurgentlabel是否紧急：elradiogroupvmodelform。urgentelradio：label1是elradioelradio：label0否elradioelradiogroupelformitemelformitempropcontentlabel事项详情：elinputtypetextareavmodelform。contentelinputelformitemelformitemelbuttontypeprimaryclickonSubmit立即创建elbuttonelbuttonclickcancel取消elbuttonelformitemelformtemplate
　　9。小结
　　本小节我们主要带大家一起使用Element优化了我们之前的TODO项目，并在项目中，把我们在之前章节中学习的知识点加以运用。其实，诸如Element之类的Vue组件库还有很多，比如：嘀嘀团队的CubeUI、有赞团队的Vant等等，使用这些组件库可以让我们快速高效地完成项目。