用vue3搭建一个图书管理系统

好的，以下是基本的步骤：

1. 创建一个Vue项目

可以使用Vue CLI来创建一个基本的Vue项目。安装Vue CLI并使用以下命令来创建项目：

vue create book-management-system

2. 安装并引入Element Plus

Element Plus是一套基于Vue3的UI框架，可以使用npm安装并引入到项目中。

npm install element-plus --save

在项目的入口文件main.js中引入Element Plus。

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

createApp(App).use(ElementPlus).mount('#app')

3. 创建路由

使用Vue Router来创建路由，可以在src目录下创建一个router.js文件，并编写路由相关代码。

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import Books from './views/Books.vue'
import AddBook from './views/AddBook.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/books',
    name: 'books',
    component: Books
  },
  {
    path: '/books/add',
    name: 'add-book',
    component: AddBook
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

4. 创建视图组件

在src/views目录下创建三个组件文件：Home.vue、Books.vue和AddBook.vue。这些组件将在路由中使用。

<!-- Home.vue -->
<template>
  <div class="home">
    <h1>欢迎来到图书管理系统</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<!-- Books.vue -->
<template>
  <div class="books">
    <h1>图书列表</h1>
    <table>
      <thead>
        <tr>
          <th>图书名称</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(book, index) in books" :key="index">
          <td>{{ book.name }}</td>
          <td>{{ book.author }}</td>
          <td>{{ book.publisher }}</td>
          <td>
            <button @click="editBook(book)">编辑</button>
            <button @click="deleteBook(book)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <router-link to="/books/add">添加图书</router-link>
  </div>
</template>

<script>
export default {
  name: 'Books',
  data() {
    return {
      books: [
        { name: 'Vue.js实战', author: '张鑫旭', publisher: '人民邮电出版社' },
        { name: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas', publisher: '人民邮电出版社' },
        { name: 'CSS权威指南', author: 'Eric A. Meyer', publisher: '人民邮电出版社' }
      ]
    }
  },
  methods: {
    editBook(book) {
      // 编辑图书
    },
    deleteBook(book) {
      // 删除图书
    }
  }
}
</script>

<!-- AddBook.vue -->
<template>
  <div class="add-book">
    <h1>添加图书</h1>
    <form>
      <div>
        <label for="name">图书名称：</label>
        <input type="text" id="name" v-model="name">
      </div>
      <div>
        <label for="author">作者：</label>
        <input type="text" id="author" v-model="author">
      </div>
      <div>
        <label for="publisher">出版社：</label>
        <input type="text" id="publisher" v-model="publisher">
      </div>
      <button type="submit" @click.prevent="submitForm">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'AddBook',
  data() {
    return {
      name: '',
      author: '',
      publisher: ''
    }
  },
  methods: {
    submitForm() {
      // 提交表单
    }
  }
}
</script>

5. 添加导航菜单

在App.vue中添加导航菜单，使用Element Plus中的Menu组件。

<template>
  <div id="app">
    <el-menu :default-active="$route.path" mode="horizontal">
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/books">图书列表</el-menu-item>
    </el-menu>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  max-width: 800px;
  margin: 0 auto;
}
</style>

6. 完善组件功能

在Books.vue和AddBook.vue组件中添加编辑和删除图书的功能。

// Books.vue
editBook(book) {
  // 编辑图书
  this.$router.push({ name: 'add-book', query: { id: book.id }})
},
deleteBook(book) {
  // 删除图书
  const index = this.books.indexOf(book)
  this.books.splice(index, 1)
}

// AddBook.vue
submitForm() {
  // 提交表单
  if (this.name && this.author && this.publisher) {
    const book = { id: Date.now(), name: this.name, author: this.author, publisher: this.publisher }
    this.$emit('add', book)
    this.$router.push('/books')
  }
}

7. 完成

至此，基本的图书管理系统就完成了。可以在浏览器中查看效果并进行测试。