spring-webmvc练习-日程管理-使用Vue3+Vite+Element-Plus技术修改界面假数据

1、main.js
javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

let app = createApp(App);
app.use(ElementPlus, {
    locale: zhCn,
})
app.mount('#app')
2、App.vue
html 复制代码
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="编号" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="学习计划" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="是否完成" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.completed?'完成':'未完成' }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="其他操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>

interface scheduleList {
  id: Number
  title: string
  completed: boolean
}

const handleEdit = (index: number, row: scheduleList) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: scheduleList) => {
  console.log(index, row)
}

const tableData: scheduleList[] = [
  {
    id: 1,
    title: '学习Java',
    completed: true,
  },
  {
    id: 2,
    title: '学习H5',
    completed: true,
  },
  {
    id: 3,
    title: '学习CSS',
    completed: false,
  },
]
</script>
在Vue3 + Vite项目中，main.js文件也是应用程序的入口文件，主要用于初始化和配置Vue实例。以下是可能出现在main.js文件中的一些代码片段及其含义：
导入依赖项：通过使用ES模块语法导入Vue框架和其他必要的插件或库。
创建Vue实例：使用createApp函数创建Vue实例，包括传入的选项对象。例如：
javascript 复制代码
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
配置全局组件或插件：使用app.component或app.use方法来注册全局组件或插件。例如：
javascript 复制代码
import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './plugins/my-plugin';

const app = createApp(App);

app.component('my-component', MyComponent);
app.use(MyPlugin);
配置路由：通过导入Vue Router库和定义路由映射，来配置应用程序的路由。例如：
javascript 复制代码
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);
配置状态管理：通过导入Vuex库和定义状态、mutations、actions和getters等来配置应用程序的状态管理。例如：
javascript 复制代码
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);

app.use(store);
初始化应用程序：设置应用程序的默认状态和行为，包括设置应用程序的入口页面、页面标题、菜单等。

启动应用程序：调用app.mount方法启动应用程序，将应用程序挂载到指定的HTML元素上。

其他：其他可能涉及到的逻辑，如全局事件处理、导入CSS样式等。