// vite配置文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    // 設(shè)置項(xiàng)目啟動(dòng)后默認(rèn)打開(kāi)瀏覽器
    open:true,
    // 設(shè)置ip
    host:"127.0.0.1",
    // 設(shè)置端口
    port:3000
  }
})

npm install element-plus --save

import { createApp } from "vue";
// 引入組件App，app.vue是根組件
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
const app = createApp(App);
// 使用use綁定到實(shí)例上面
app.use(ElementPlus);
// 掛載到app
app.mount("#app");

<script setup>
import {ref} from 'vue';
// ref中可以設(shè)置默認(rèn)值
const searchVal = ref() 
// 回車(chē)事件
const enterSearch = () =>{}
// 查詢(xún)事件
const load = () =>{}
// 新增事件
const openAdd = () =>{}
// 編輯
const handleEdit = () =>{}
// 刪除
const handleDelete = () =>{}
// 表格數(shù)據(jù)
const tableData = ref([])
</script>
<!-- 模板 -->
<template>
  <div class="container">
    <!-- 行列布局 -->
    <el-row>
      <!-- span指定列的寬度 -->
      <el-col :span="12">
        <!-- 搜索框 -->
        <!-- 通過(guò)v-model做數(shù)據(jù)綁定 -->
        <el-input v-model="searchVal" placeholder="請(qǐng)輸入要搜索的關(guān)鍵字" class="input-with-select" @keyup.enter="enterSearch">
        </el-input>
      </el-col>
      <!-- 查詢(xún)、新增按鈕 -->
      <el-col :span="12">
        <el-button type="primary" @click="load">查詢(xún)</el-button>
        <el-button type="primary" @click="openAdd">新增</el-button>
      </el-col>
    </el-row>

    <!-- table表格 -->
    <!-- 表格數(shù)據(jù)綁定和默認(rèn)寬度 -->
    <el-table :data="tableData" style="width:100%">
      <!-- 每一個(gè)列，prop為主鍵，label為文案 -->
      <!-- 索引 -->
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="img" label="圖片" width="180"></el-table-column>
      <el-table-column prop="title" label="書(shū)名" width="180"></el-table-column>
      <el-table-column prop="author" label="作者" width="180"></el-table-column>
      <el-table-column prop="price" label="價(jià)格"></el-table-column>
      <el-table-column prop="remarks" label="備注"></el-table-column>
      <el-talble-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index,scope.row)">編輯</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)">刪除</el-button>
      </template>
      </el-talble-column>
    </el-table>
  </div>
</template>
<style scoped>
.container {
  width: 60%;
  margin: 100px auto;
}
.el-button{
  /* 增加按鈕間距 */
  margin-left: 12px;
}
</style>