vue3 element-plus 列表

这篇文章介绍了一个基于 Vue3 和 ElementPlus 的小 demo，是一个模拟的联系人列表管理后台，包括了数据的展示、编辑、删除和列表分页功能。Element Plus是一个基于Vue3的组件库，面向设计师和开发者，提供了很多组件模板，可以帮助我们快速完成页面。在这个demo中，作者使用了Element Plus的table组件来完成列表界面。如果你想学习如何使用Vue3和Element Plus来实现联系人列表管理后台，可以关注作者的下一篇文章，预告使用Node.js来实现。

相关问题

vue-element-plus-admin 组件内怎么使用element-plus

### 如何在 `vue-element-plus-admin` 项目中引入和使用 Element Plus 组件

#### 安装依赖包
为了能够顺利使用 Element Plus 的组件，在项目的根目录下执行如下命令来安装必要的依赖：

npm install element-plus @types/element-plus --save

这一步骤确保了所有必需的库都已就绪并可以被导入到应用程序之中[^2]。

#### 配置按需加载 (Optional)
如果希望减少打包体积，可以选择只引入所需的组件而不是整个库。通过借助插件如 `unplugin-vue-components` 和 `unplugin-auto-import` 可实现这一点。首先需要安装这些工具：

npm install unplugin-vue-components unplugin-auto-import -D

接着修改 vite.config.ts 文件配置上述两个插件:

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', '@vueuse/core'],
      dts: true,
    }),
    Components({
      resolvers: [
        // 自动注册来自 Element Plus 的组件
        {
          type: 'component',
          resolve: name => ({ name, from: 'element-plus' })
        }
      ]
    })
  ],
})

这样设置之后就可以自动解析并按需加载 Element Plus 组件而无需手动一一声明。

#### 使用单个组件实例
当只需要在一个页面或模块里单独使用某个特定组件时可以直接从 `element-plus` 导入它，并将其添加至当前文件内的 components 属性列表内：

<template>
  <el-button>默认按钮</el-button>
</template>

<script lang="ts">
import { ElButton } from "element-plus";
// 或者 ES6 解构赋值方式 import { Button as ElButton } from 'element-plus';

export default {
  name: "ExampleComponent",
  components: { ElButton },
};
</script>

此方法适用于那些不经常使用的特殊场景下的控件，因为它允许更细粒度地控制哪些部分应该被打包进来[^1]。

#### 全局注册全部组件
对于大多数情况下推荐的方式是在 main.ts 中全局注册所有的 Element Plus 组件以便在整个应用范围内随时调用它们：

import { createApp } from 'vue';
import App from './App.vue';
import * as ElementPlus from 'element-plus'; 

const app = createApp(App);

app.use(ElementPlus);
app.mount('#app');

这种方式简化了开发流程因为不再需要每次都要显式指定要使用的具体组件名称；但是请注意这样做可能会增加最终构建产物大小所以仅当你确实需要用到很多不同类型的 UI 控制器才考虑采用这种方法。

vue3 element-plus

Vue 3 是 Vue.js 的最新版本，而 Element Plus 是一个基于 Vue 3 开发的 UI 组件库。Element Plus 是对 Element UI 的升级和扩展，提供了一套功能强大、易于使用的组件，用于构建现代化的 Web 应用程序。

Element Plus 提供了丰富的 UI 组件，包括按钮、表单、表格、弹窗、导航菜单等等。它具有灵活的配置选项和丰富的功能，可以帮助开发者快速构建漂亮且高效的界面。

要在 Vue 3 中使用 Element Plus，你需要先安装 Element Plus 的依赖。可以通过 npm 或者 yarn 来安装，具体的安装命令如下：

npm 安装：

npm install element-plus

yarn 安装：

yarn add element-plus

安装完成后，你可以在项目的入口文件中引入 Element Plus：

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

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

上述代码中，我们首先引入 Element Plus 的库文件，并导入对应的 CSS 样式。然后，通过 `app.use(ElementPlus)` 将 Element Plus 注册为 Vue 3 的插件，最后使用 `app.mount('#app')` 将应用挂载到页面上。

接下来，你就可以在 Vue 3 的组件中使用 Element Plus 的组件了，例如：

<template>
  <el-button type="primary">按钮</el-button>
</template>

<script>
export default {
  name: 'MyComponent'
};
</script>

以上就是在 Vue 3 中使用 Element Plus 的基本步骤，希望对你有所帮助！如有更多疑问，可以继续提问。