Vue3.x和 Element Plus 之ToDoList(一)

vue3.x 已经出来一段时间了。而ElementUI 也是以TypeScript和Composition API进行了重构重开了一个ElementPlus。（谁说Element 没人维护的~~~）

安装或升级vue/cli

直接在原有的基础上进行升级 npm i -g @vue/cli
或者npm install -g @vue/cli@next

创建todo-app

1.创建app
vue create todo-app

2.选择模板
Default(Vue 3 Preview)

或 Manually select features。选择你需要的插件和需要的功能

3.运行

npm run serve

加入Element-Plus

1.安装依赖

npm install element-plus --save

2.全局完整使用插件（这里只说完整，按需引入参考文档）
main.js中引入并使用element-ui插件：

import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";

createApp(App)
  .use(ElementPlus)
  .mount("#app");

新建页面

view内新增俩页面：todoList和todoAdd

const routes = [
  {
    path: "/list",
    name: "TodoList",
    component: () => import("@/views/todoList.vue"),
  },
  {
    path: "/add",
    name: "Add",
    component: () => import("@/views/todoAdd.vue"),
  },
];

而路由的用法也是相较于以前的vue-router进行了部分更改

2.x对应的插件vue-router用法:

new Router({
    scrollBehavior: () => ({
      y: 0
    }),
    routes
  })

main.js中使用该router

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

3.x对应的插件vue-router-next用法:

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

main.js中使用该router

createApp(App)
  .use(ElementPlus)
  .use(router)
  .mount("#app");

新建vuex

相较于以前new 出Vuex.Store的实例。3.x对应vuex插件的用法使用createStore创建

import { createStore } from "vuex";

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
});

新增页面

新增页面这里保存日期createDate和内容memo以及以时间戳为id这是三个字段
使用Composition API

使用setup选项。创建响应式的对象todo。

<template>
  <el-input type="textarea" v-model="todo.memo"></el-input>
  <el-button type="primary" @click="save">保存</el-button>
</template>
...省略
setup() {
    const todo = reactive({
      id: new Date().getTime(),
      memo: "",
      createDate: dayjs(new Date()).format("YYYY-MM-DD")
    });
    return {
      todo
    };
  },

响应式之 reactive

vue3.0中 reactive 返回对象的响应式副本。然后在其他地方使用该返回的响应式对象即可。类似于opional data内初实话的数据。不过这里在setup中是没有this的。这个时候还没有

响应式之ref

ref内接受一个值且返回一个响应式ref属性对象，而ref内的值就是初始值。且使用该属性值只能.value

千里之行
始于足下