UI 神器 - Vue3 中如何使用 element-plus

Element Plus 是一个基于 Vue 3 的 UI 组件库，由饿了么前端团队开发，旨在为设计师和开发者提供一套高效、易用的组件，以帮助快速搭建企业级的后台产品。以下是 Element Plus 的一些基础用法：

快速开始

1. 完整引入：
   如果你对打包后的文件大小不是很在乎，可以选择完整导入 Element Plus。在你的项目的入口文件（如 main.ts）中，可以按以下方式引入 Element Plus 及其样式：

   // main.ts
   import { createApp } from 'vue'
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   import App from './App.vue'
   
   const app = createApp(App)
   app.use(ElementPlus)
   app.mount('#app')
   

2. Volar 支持：
   如果你使用 Volar 作为你的 IDE 的插件，为了支持全局组件类型，你需要在 tsconfig.json 中指定 types 配置：

   {
     "compilerOptions": {
       // ...
       "types": ["element-plus/global"]
     }
   }
   

3. 按需导入：
   为了优化你的项目大小，你可以选择按需导入 Element Plus 组件。你可以使用一些插件，如 unplugin-auto-import 和 unplugin-vue-components 来实现这一点。

   对于 Vite 项目，配置如下：

   // vite.config.ts
   import { defineConfig } from 'vite'
   import AutoImport from 'unplugin-auto-import/vite'
   import Components from 'unplugin-vue-components/vite'
   import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
   
   export default defineConfig({
     plugins: [
       AutoImport({
         resolvers: [ElementPlusResolver()],
       }),
       Components({
         resolvers: [ElementPlusResolver()],
       }),
     ],
   })
   

   对于 Webpack 项目，配置如下：

   // webpack.config.js
   const AutoImport = require('unplugin-auto-import/webpack')
   const Components = require('unplugin-vue-components/webpack')
   const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
   
   module.exports = {
     plugins: [
       AutoImport({
         resolvers: [ElementPlusResolver()],
       }),
       Components({
         resolvers: [ElementPlusResolver()],
       }),
     ],
   }
   

使用 Element Plus 组件

1. 手动导入：
   如果你想手动导入特定的组件，可以直接在你的 Vue 文件中导入所需的组件。例如，如果你想使用 ElButton 组件，可以这样做：

   <template>
     <el-button>I am ElButton</el-button>
   </template>
   
   <script>
   import { ElButton } from 'element-plus'
   
   export default {
     components: {
       ElButton,
     },
   }
   </script>
   

2. 快捷搭建项目模板：
   Element Plus 提供了 Vite 模板，你可以通过该模板快速开始一个新的 Element Plus 项目。对于 Laravel 用户，也有相应的模板可供使用。

3. 全局配置：
   当你引入 Element Plus 时，可以传入一个全局配置对象，用于设置表单组件的默认尺寸（size）和弹出组件的层级（zIndex）。

   // main.ts
   import { createApp } from 'vue'
   import ElementPlus from 'element-plus'
   import App from './App.vue'
   
   const app = createApp(App)
   app.use(ElementPlus, {
     size: 'small',
     zIndex: 3000,
   })
   app.mount('#app')
   

4. 使用 Nuxt.js：
   Element Plus 也可以与 Nuxt.js 结合使用。你可以访问 Element Plus 的官方文档，了解如何在你的 Nuxt.js 项目中使用 Element Plus。

开始使用

现在你已经了解了 Element Plus 的基础用法，可以开始使用 Element Plus 提供的丰富组件来构建你的应用了。对于每个组件的具体用法，请参考 Element Plus 的官方文档，那里会有详细的说明和示例代码。