Vue3+Elemenet Plus入门实战，实现一个 TODO 系统的前端UI项目

最新推荐文章于 2024-08-15 14:35:54 发布

Jack N

最新推荐文章于 2024-08-15 14:35:54 发布

阅读量1.4w

点赞数 2

分类专栏： Vue.js 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_43288714/article/details/111685594

版权

本文介绍如何使用Vue3.0和Element Plus UI框架构建一个TODO应用程序，涵盖了项目创建、组件引入和API集成。通过Vue CLI创建项目，集成axios与后端Spring Boot API交互，并解决样式问题。

摘要由CSDN通过智能技术生成

1. TODO程序的基于Vue3.0的前端实现
2. 代码实现
3. 核心代码
4. 总结

1. TODO程序的基于Vue3.0的前端实现

1.1. 概要

前端Vue3.0入手项目，实现一个TODO程序，前端采用Vue3.0，后端采用Spring Boot实现。后端实现参考https://github.com/jackniu81/todo-app/tree/main/todo-api，本文着重前端实现。国内比较流行的element，针对Vue3.0的实现，叫做element plus，目前处于Beta阶段，也稍稍试一下。

1.2. 目的

Vue3.0 和element-plus UI框架的集成
使用axios和API集成
Vue3.0中使用Typescript

1.3. 主要功能

实现TODO程序，数据库保存在MySQL数据库。

新建task
更改task的状态
客户端可以根据状态过滤task列表
和真实API交互。

在这里插入图片描述

1.4. 环境

Vue v3.0
@vue/cli v4.5.9
element-plus v1.0.1-beta.11 (element UI 的Vue3.0 版本)
node.js v12.18.2
npm v6.14.5

2. 代码实现

2.1. 创建Vue3.0项目

使用@vue/cli, 创建一个Vue3.0的项目。

# 安装 Vue CLI。如果已安装，跳过此步骤
npm install -g @vue/cli

# 创建项目
vue create todo-vue3

2.2. 引入 element-plus

安装

npm install element-plus --save

在 main.js 中引入 ElementPlus

import {
    createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

引入ElementPlus后，可以随便加些控件测试一下。如

<el-button type="primary" icon="el-icon-search">搜索</el-button>

2.3. 引入axios用于api数据读取

在 main.js 中引入

import axios from 'axios'
import VueAxios from 'vue-axios'

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