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

　　1. 前言
　　本小节我们将带大家利用 Element 一起优化我们的 TODO 项目。 2. Element 简介
　　Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由 ＂饿了么＂ 公司前端团队开源。 3. 编写路由
　　首先，我们需要定义两个路由，分别是待办事项列表页面和添加待办事项页面。我们可以打开 ‘router/index.js’ 文件进行如下配置： import Vue from ＂vue＂; import VueRouter from ＂vue-router＂; import List from ＂../views/List.vue＂; import Add from ＂../views/Add.vue＂;  Vue.use(VueRouter);  const routes = [   {     path: ＂/list＂,     name: ＂list＂,     component: List,     alias: ＂/＂   },   {     path: ＂/add＂,     name: ＂home＂,     component: Add   } ];  const router = new VueRouter({   routes });  export default router; 4. 入口文件
　　要使用 Element 首先我们需要通过 npm 安装 Element： npm install element-ui --save
　　安装完成之后，我们需要修改 main.js import Vue from ＂vue＂; import App from ＂./App.vue＂; import router from ＂./router＂; import store from ＂./store＂;  Vue.config.productionTip = false;  import ElementUI from ＂element-ui＂; import ＂element-ui/lib/theme-chalk/index.css＂;  Vue.use(ElementUI);  new Vue({   router,   store,   render: h => h(App) }).$mount(＂#app＂);  5. 使用 Vuex 保存数据5.1 创建 mutation-types (store/types.js)export const INIT_TODO = ＂INIT_TODO＂; export const ADD_TODO = ＂ADD_TODO＂; export const DEL_TODO = ＂DEL_TODO＂; export const COMPLETE_TODO = ＂COMPLETE_TODO＂; 5.2 创建 store (store/index.js)import Vue from ＂vue＂; import Vuex from ＂vuex＂; import axios from ＂axios＂;  Vue.use(Vuex);  import { ADD_TODO, DEL_TODO, COMPLETE_TODO, INIT_TODO } from ＂./types＂;  export default new Vuex.Store({   state: {     list: []   },   getters: {     count: state => isComplete => {       return state.list.filter(item => item.isComplete === isComplete).length;     },     todoList: state => {       return state.list;     }   },   mutations: {     [INIT_TODO](state, payload) {       state.list = payload.list;     },     [ADD_TODO](state, payload) {       state.list.push(payload);     },     [DEL_TODO](state, payload) {       const index = payload.index;       state.list.splice(index, 1);     },     [COMPLETE_TODO](state, payload) {       const index = payload.index;       state.list[index].isComplete = 1;     }   },   actions: {     initList({ commit }) {       axios.get(＂/todo/list＂).then(res => {         commit(INIT_TODO, { list: res.data.data });       });     }   } });  6. 改造 App.vue      7. 编写列表页面（views/list.vue）     8. 编写添加事项页面
　　9. 小结
　　本小节我们主要带大家一起使用 Element 优化了我们之前的 TODO 项目，并在项目中，把我们在之前章节中学习的知识点加以运用。其实，诸如 Element 之类的 Vue 组件库还有很多，比如： 嘀嘀团队的 Cube-UI、有赞团队的 Vant 等等，使用这些组件库可以让我们快速高效地完成项目。