38 《Vue 入门教程》元素美化TODO项目

1.前言本小节我们将带大家利用元素一起优化我们的待办事项项目。
2.元素简介元素是一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库，提供了配套设计资源，帮助你的网站快速成型。由”饿了么”公司前端团队开源。
3.编写路由首先，我们需要定义两个路由，分别是待办事项列表页面和添加待办事项页面。我们可以打开’ router/index.js ‘文件进行如下配置：
从“Vue”导入Vue从” vue路由器”导入VueRouter ‘导入列表自’./视图/列表。vue ‘；’导入添加自’./views/add。vue ‘；vue。使用(vue路由器)；const routes=[ { path: ‘/list ‘，name: ‘list ‘，component: List，alias: ‘/’ }，{ path: ‘/add ‘，name: ‘home ‘，component : Add }]；const router=new vue router({ routes })；导出默认路由器；4.入口文件要使用元素首先我们需要通过新公共管理安装元素：
新公共管理安装元素-ui -保存安装完成之后，我们需要修改主页。射流研究…
从“Vue”导入Vue从’导入应用程序. 1/app。vue ‘；从’导入路由器./路由器’；从’导入存储./store ‘；vue。配置。生产提示=假；从”元素-用户界面”导入ElementUI导入“元素-ui/lib/主题-粉笔/索引。CSS”；vue。使用(元素ui)；new Vue({ router，store，render: h=h(App)}).$ mount(‘ # app ‘)；5.使用状态管理保存数据5.1 创建突变类型(商店/类型. js)导出常量INIT _ TODO=’ INIT _ TODO导出常量ADD _ TODO=’ ADD _ TODO export const DEL _ TODO=’ DEL _ TODO ‘；export const COMPLETE _ TODO=’ COMPLETE _ TODO ‘；5.2 创建商店(store/index.js)从Vue导入Vue从” Vuex “导入Vuex从” axios “导入axiosvue。使用(Vuex)；从’导入{添加任务，删除任务，完成任务，初始化任务} ./types ‘；导出默认的新Vuex .Store({ state: { list: [] }，getter : { count : state=is complete={ return state。列表。过滤器(item=item。已完成===已完成).长度；}，todolist : state={ return state。列表；} },突变： {[初始化任务](状态，有效负载){状态。列表=有效载荷。列表；}，[ADD_TODO](状态，有效负载){状态。列表。推(有效载荷)；}，[DEL_TODO](状态，有效负载){常量索引=有效负载。指数；state.list.splice(索引，1);}，[COMPLETE_TODO](状态，有效负载){ const index=有效负载。指数；state.list[index].已完成=1；} }，动作： { initList({ commit }){ axios。get(‘/todo/list ‘).然后(res={ commit(INIT_TODO，{ list : RES . data。data })；});} }});6.改造App.vue待办列表添加待办
7.编写列表页面(视图/列表。vue){ { scope。划。紧急|紧急文本} }删除完成总共：{{ todoList.length }}个任务。已完成：{{ count(1) }}个任务。未完成：{{ count(0) }}个任务。
8.编写添加事项页面是否立即创建取消9.小结本小节我们主要带大家一起使用元素优化了我们之前的待办事项项目，并在项目中，把我们在之前章节中学习的知识点加以运用。其实，诸如元素之类的某视频剪辑软件组件库还有很多，比如：嘀嘀团队的Cube-UI有赞团队的栈等等，使用这些组件库可以让我们快速高效地完成项目。