Element 美化 TODO 项目_Vue 入门教程-慕课网

首页慕课教程 Vue 入门教程 Element 美化 TODO 项目

此间少年_ · 更新于 2020-12-07

Vue 本地 Mock 数据

Vue 项目打包部署

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;
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

4. 入口文件

要使用 Element 首先我们需要通过 npm 安装 Element：

npm install element-ui --save
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1

安装完成之后，我们需要修改 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");

                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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";
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4

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 });
      });
    }
  }
});

                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

6. 改造 App.vue

<template>
  <div id="app">
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu router>
          <el-menu-item index="/list">
            <i class="el-icon-menu"></i>
            <span slot="title">待办列表</span>
          </el-menu-item>
          <el-menu-item index="/add">
            <i class="el-icon-circle-plus-outline"></i>
            <span slot="title">添加待办</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "App",
  components: {},
  methods: {
    ...mapActions(["initList"])
  },
  created() {
    this.initList();
  }
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
#app {
  height: 100%;
}
</style>

                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

7. 编写列表页面（views/list.vue）

<template>
  <div>
    <el-table
      class="el-table"
      :data="todoList"
      border
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column fixed prop="name" label="事项名称" width="150">
      </el-table-column>
      <el-table-column prop="date" label="事项截止时间" width="120">
      </el-table-column>
      <el-table-column prop="type" label="事项类型" width="120">
      </el-table-column>
      <el-table-column prop="urgent" label="是否紧急" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.urgent | urgentText }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="事项详情"></el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            @click="handleDelete(scope.$index)"
            type="danger"
            size="small"
            >删除</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="handleComplete(scope.$index)"
            :disabled="scope.row.isComplete === 1"
            >完成</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:left">
      总共：{{ todoList.length }} 个任务。 已完成：{{
        count(1)
      }}
      个任务。未完成：{{ count(0) }} 个任务。
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import { COMPLETE_TODO, DEL_TODO } from "../store/types";
export default {
  methods: {
    ...mapMutations([COMPLETE_TODO, DEL_TODO]),
    handleDelete(index) {
      this.DEL_TODO({ index });
    },
    handleComplete(index) {
      this.COMPLETE_TODO({ index });
    },
    tableRowClassName({ row }) {
      if (row.isComplete === 1) {
        return "complete-row";
      }
      return "";
    }
  },
  computed: {
    ...mapGetters(["todoList", "count"])
  },
  filters: {
    urgentText(value) {
      if (value === 0) {
        return "紧急";
      }
      return "非紧急";
    }
  },
  data() {
    return {
      tableData: []
    };
  }
};
</script>
<style>
.el-table .complete-row {
  background: #f0f9eb;
}
</style>

                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

8. 编写添加事项页面

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="180px">
    <el-form-item prop="name" label="事项名称：">
      <el-input v-model="form.name"></el-input>
    </el-form-item>

    <el-form-item prop="date" label="事项截止时间：">
      <el-date-picker
        type="date"
        placeholder="选择日期"
        v-model="form.date"
        value-format="yyyy-MM-dd"
        style="width: 100%;"
      ></el-date-picker>
    </el-form-item>

    <el-form-item prop="type" label="事项类型：">
      <el-select
        v-model="form.type"
        placeholder="请选择活动区域"
        style="width: 100%;"
      >
        <el-option label="学习" value="学习"></el-option>
        <el-option label="工作" value="工作"></el-option>
        <el-option label="游戏" value="游戏"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item prop="urgent" label="是否紧急：">
      <el-radio-group v-model="form.urgent">
        <el-radio :label="1">是</el-radio>
        <el-radio :label="0">否</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item prop="content" label="事项详情：">
      <el-input type="textarea" v-model="form.content"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { mapMutations } from "vuex";
import { ADD_TODO } from "../store/types";
export default {
  data() {
    return {
      form: {
        name: "",
        content: "",
        date: "",
        urgent: 1,
        type: ""
      },
      rules: {
        name: [
          { type: "string", required: true, message: "请填写待办事项的名称" }
        ],
        content: [
          {
            type: "string",
            required: true,
            message: "请填写待办事项的详情",
            trigger: "blur"
          },
          {
            type: "string",
            min: 20,
            max: 50,
            message: "长度限制在20-50个字符",
            trigger: "blur"
          }
        ],
        type: [
          { type: "string", required: true, message: "请填写待办事项的称类型" }
        ]
      }
    };
  },
  methods: {
    ...mapMutations([ADD_TODO]),
    onSubmit() {
      this.$refs.form.validate(validate => {
        if (validate) {
          this.ADD_TODO({ ...this.form, isComplete: 0 });
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.$refs.form.resetFields();
        }
      });
    },
    cancel() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

图片描述

9. 小结

本小节我们主要带大家一起使用 Element 优化了我们之前的 TODO 项目，并在项目中，把我们在之前章节中学习的知识点加以运用。其实，诸如 Element 之类的 Vue 组件库还有很多，比如：嘀嘀团队的 Cube-UI、有赞团队的 Vant 等等，使用这些组件库可以让我们快速高效地完成项目。

Vue 本地 Mock 数据

Vue 项目打包部署

我要提出意见反馈

热搜

最近搜索 清空

我的购物车

已加入门课程

购物车里空空如也

Vue 入门教程

前端开发

JavaScript

JavaScript 入门教程

TypeScript 入门教程

Vue 入门教程

Ajax 入门教程

ES6-10 入门教程

Yarn 入门教程

ECharts 入门教程

HTML & CSS

CSS3 入门教程

雪碧图入门教程

移动端布局教程

Html5 入门教程

Sass 入门教程

HTML 入门教程

canvas 入门教程

uni-app 入门教程

服务端相关

服务器

Nginx 入门教程

HTTP 入门教程

Docker 入门教程

Shell 入门教程

Linux 入门教程

开发工具

Gradle 入门教程

Vim 编辑器教程

RESTful 规范教程

Dreamweaver 教程

Markdown 入门教程

Maven 入门教程

Eclipse 编辑器教程

GitHub 入门教程

Android Studio 编辑器教程

PyCharm 编辑器教程

Sublime Text 使用教程

Postman 教程

Git入门教程

热门服务端语言

C 语言入门教程

Go 入门教程

Kotlin 教程

Ruby 入门教程

ThinkPHP 入门教程

Java

基础应用

Java 入门教程

Android 入门教程

算法入门教程

数据结构入门教程

Lambda 表达式教程

Java 并发原理入门教程

设计模式入门教程

Java并发工具

JVM 入门教程

RabbitMQ 入门教程

网络编程入门教程

后端通用面试教程

框架应用

Spring Boot 入门教程

Spring 入门教程

Hibernate 入门教程

MyBatis 入门教程

Spring MVC 入门教程

Swagger 入门教程

Zookeeper 入门教程

Netty 教程

Spring Security

微服务

Spring Cloud Hystrix

Python

基础应用

Python 入门语法教程

最近搜索清空