用vue文件实现简易图书管理

在Vue.js中实现一个简单的图书管理系统，可以采用组件化的方式来构建，以下是步骤概述：

1. **项目初始化**：
使用Vue CLI创建一个新的项目，安装所需的依赖如`vue-router`用于路由管理，`axios`用于API请求等。

npm install -g @vue/cli
vue create my-library-app
cd my-library-app

2. **组件设计**：
- **BookList.vue**: 显示所有书籍列表的组件，通过数据绑定展示从服务器获取的书籍信息，并包含搜索框。

   <template>
     <div>
       <input v-model="searchText" placeholder="搜索图书...">
       <ul>
         <li v-for="book in filteredBooks" :key="book.id">
           {{ book.title }}
         </li>
       </ul>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         searchText: '',
         books: [],
       };
     },
     computed: {
       filteredBooks() {
         // 搜索功能
         return this.books.filter(book => book.title.includes(this.searchText));
       }
     },
     async mounted() {
       await axios.get('/api/books').then(response => (this.books = response.data));
     }
   };
   </script>

- **AddBook.vue**: 用户添加新书的表单组件。
- **EditBook.vue**: 编辑已有书籍的表单组件。

3. **路由配置**：
在`src/router/index.js`中设置路由规则，比如：

   import BookList from './views/BookList.vue';
   import AddBook from './views/AddBook.vue';

   const routes = [
     { path: '/', component: BookList },
     { path: '/add', component: AddBook },
     // 添加其他书籍操作的路由
   ];

4. **导航守卫**（可选）：
如果有权限控制或需要登录，可以在`router.beforeEach`中处理。

5. **运行应用**：
使用`npm run serve`启动本地开发服务器。