element plus使用

### 使用 Element Plus 进行开发

#### 安装 Element Plus

为了在 Vue 3 项目中使用 Element Plus，需要先安装该库。可以通过 npm 或 yarn 来完成这一操作[^2]。

npm install element-plus --save

或者对于偏好 yarn 的开发者：

yarn add element-plus

#### 配置 Vite 开发环境

如果采用的是现代前端构建工具如 Vite，则可以在 `vite.config.js` 中配置 Element Plus 插件来优化打包性能并实现按需加载功能。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
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: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

#### 设置语言包

为了让应用程序界面更友好，默认情况下 Element Plus 提供英文作为内置语言选项之一。但是可以根据需求更改成其他语言比如中文，在项目的入口文件 `main.js` 中可以轻松切换语言设置。

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn' // 导入中文语言包
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus, {
  locale: zhCn,
})

app.mount('#app')

#### 实践案例：创建省市级联选择器

下面是一个简单的例子展示如何利用 Element Plus 创建一个多级联动菜单用于省份城市的选择。

<template>
  <el-cascader :options="options" v-model="selectedOptions"></el-cascader>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [{
      value: 'hangzhou',
      label: 'Hangzhou',
    }],
  },
];

const selectedOptions = ref([]);
</script>