【Vue3】用Element Plus实现列表界面

🏆今日学习目标：用Element Plus实现列表界面
😃创作者：颜颜yan_
✨个人格言：生如芥子，心藏须弥
⏰本期期数：第四期
🎉专栏系列：Vue3

---

---

前言

哈喽大家好，本期我们用Element Plus实现列表界面，我们先用vue+vite创建一个vue项目，创建项目可以参考：利用vite创建vue3项目噢~

---

效果图

目录简介

创建项目成功后，目录如下👇

• .vscode：vscode的配置文件
• node_modules：执行npm时初始化的包文件
• public：存放公共资源
• src：存放静态资源，重要文件
• components：组件文件夹
• App.vue：根组件
• main.js：主函数，全局配置的地方，是全局文件
• index.html：项目的起始页面
• package.json：项目的配置
• vite.config.js：vite的项目配置文件，可以配置ip、端口等高级操作。

修改vite配置文件

在编写代码时，我们可以修改vite的默认配置，比如启动后自动打开浏览器、设置ip、端口。vite默认是随机一个端口地址，这里我们可以更改为指定的端口。
打开vite.config.js文件中添加server，将open属性设置为true，host设置ip，port设置端口。

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

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [vue()],
  server:{
   
    // 设置项目启动后默认打开浏览器
    open:true,
    // 设置ip
    host:"127.0.0.1",
    // 设置端口
    port:3000
  }
})

Element Plus简介

Element Plus是基于Vue3，面向设计师和开发者的组件库。有很多组件模板，可以帮助我们快速完成页面噢，推荐~
Element Plus官网

Element Plus安装和引用

进入项目目录，在地址栏输入cmd，然后回车，进入项目目录的命令提示符。


输入npm install element-plus --save进行安装。

npm install element-plus --save

接着在main.js中引入element plus，先使用import引入element plus组件，然后使用use绑定到实例上面。

import {
    createApp } from "vue";
// 引入组件App，app.vue是根组件
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css"