element-plus

原创已于 2024-04-23 20:51:38 修改 · 363 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数学建模 #javascript #开发语言

于 2023-06-26 16:41:59 首次发布

在Vite+Vue3+TS环境下集成Element-Plus，需执行1)安装element-plus和按需导入插件；2)配置vite.config.ts，引入AutoImport和Components插件；3)直接在页面使用组件；4)注意环境版本要求，icon图标需额外处理，网络差可能引起404问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 vite + create-vue + vue3 + ts 项目中使用element-plus步骤

1, 下载安装element-plus
cnpm i element-plus / yarn add element-plus
2, 下载elment-plus按需导入插件
cnpm i unplugin-vue-components unplugin-auto-import
3, 配置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()],
}),
],
})
4, 在页面中直接使用组件库即可
<el-button type="primary" plain>Primary</el-button>

需要注意的问题:
1, 安装环境版本要求(此处环境): node: V18.12 npm: V8.12 cnpm: V9.0 yarn: V1.22.19 (或者用yarn安装依赖)
2, 按需引入配置后,组件无需再手动引入,会在根目录生成components.d.ts文件,会在此文件中自动引入页面中使用到的组件
3, icon图标组件组件单独下载安装@element-plus/icons-vue并引入
cnpm i @element-plus/icons-vue
在页面中手动按需引入
import { Edit } from "@element-plus/icons-vue";
或者在main.ts中全部引入
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
4, element-plus 官方在网络差的情况下, 会被路由定向到404页, 一般刷新几下即可恢复