安装插件
其他安装方式:https://element-plus.gitee.io/zh-CN/guide/installation.html
# 组件库
npm install element-plus
# 图标库
npm install @element-plus/icons-vue
# 导入自动插件
npm install -D unplugin-vue-components unplugin-auto-import unplugin-icons
修改vite
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
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({
imports: ['vue', 'vue-router'],
resolvers: [
IconsResolver({
prefix: 'Icon'
}),
ElementPlusResolver()
],
dts: 'src/types/auto-import.d.ts'
}),
Components({
resolvers: [
IconsResolver({
enabledCollections: ['ep']
}),
ElementPlusResolver()
],
dts: 'src/types/auto-component.d.ts'
}),
Icons({
autoInstall: true,
}),
],
})
修复vscode ts提示
tsconfig.json
{
"include": [
//...
"src/types/*.d.ts"],
}