一、安裝Element-plus
# 選擇一個你喜歡的包管理器
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus
我使用的是 pnpm，并且順便將 element-plus/icons一起引入
pnpm install element-plus @element-plus/icons-vue
二、配置Volar 支持
如果您使用 Volar，請在根目錄下 tsconfig.json 中通過 compilerOptions.type 指定全局組件類型
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}
三、配置按需自動導入
3.1 首先你需要安裝 unplugin-vue-components 和 unplugin-auto-import 這兩款插件
pnpm install -D unplugin-vue-components unplugin-auto-import
3.2 然后把下列代碼插入到根目錄下 vite.config.ts 文件中
import { defineConfig } from 'vite'
// 以下三項引入是為配置Element-plus自動按需導入
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: [
// 以下兩項是為配置Element-plus自動按需導入
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
四、驗證是否成功
Element-lus官網(wǎng)：https://element-plus.gitee.io/zh-CN/component/button.html
打開 Element-plus 官網(wǎng)嗎，復制一點兒 el-button相關(guān)代碼進 App.vue文件文章來源：http://www.zghlxwxcb.cn/news/detail-537709.html
// 這是 src目錄下的 App.vue 文件
<script lang="ts" setup></script>
<template>
<div>
<h1>App頁面</h1>
<el-row class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</el-row>
</div>
</template>
<style lang="scss" scoped></style>
打開頁面查看，成功展示相關(guān)組件，且控制臺無報錯，至此自動按需導入配置完成
文章來源地址http://www.zghlxwxcb.cn/news/detail-537709.html
到了這里，關(guān)于Vue3+Vite項目引入Element-plus并配置按需自動導入的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
