vue3+vite使用element-plus問題
更新時間：2023年10月09日 09:28:37 作者：妍崽崽@
這篇文章主要介紹了vue3+vite使用element-plus問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
前言
vue3+vite的項目中使用 element-plus的教程。
官方地址：安裝 | Element Plusa
1、安裝
pnpm install element-plus -S
如果需要：cdn引入：index.html中加入下面的
<link rel="stylesheet" rel="external nofollow" /> <script src="http://unpkg.com/vue@3"></script> <script src="http://unpkg.com/element-plus"></script>
2、引入
import 'element-plus/dist/index.css' const app = createApp(App) app.use(ElementPlus)
按需引入：需要安裝額外的插件來支持
1）安裝
npm install -D unplugin-vue-components unplugin-auto-import
2）vite.config.js
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()],
}),
],
})3、頁面上使用
1）頁面上直接用組件
<el-button>登錄</el-button>
2）js中使用
import { ElMessage } from 'element-plus'
ElMessage('this is a message.')
ElMessage({
message: 'Congrats, this is a success message.',
type: 'success',
})總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
詳解vue3.2新增的defineCustomElement底層原理
本文主要介紹了vue3.2新增的defineCustomElement底層原理，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
為了解決加載組件中出現的報錯、超時、狀態(tài)展示等問題,可以使用?Vue?3?提供的異步組件（Async?Components）,它對于加載過程做了更細致的控制,這篇文章主要介紹了Vue?3?進階用法之異步組件,需要的朋友可以參考下2024-04-04
elementui+vue+axios實現文件上傳本地服務器
這篇文章主要為大家詳細介紹了elementui+vue+axios實現文件上傳本地服務器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
vue-router之nuxt動態(tài)路由設置的兩種方法小結
今天小編就為大家分享一篇vue-router之nuxt動態(tài)路由設置的兩種方法小結，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Vue父組件如何獲取子組件中的變量，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
Vue.js是現在比較優(yōu)秀的Web前端框架,非常推薦大家入門學習,這篇文章主要給大家介紹了關于如何一步步從零搭建一個Vue項目的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
本文主要介紹了Vue中tab欄切換的簡單實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
vue中控制mock在開發(fā)環(huán)境使用,在生產環(huán)境禁用方式
這篇文章主要介紹了vue中控制mock在開發(fā)環(huán)境使用,在生產環(huán)境禁用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+webpack dev本地調試全局樣式引用失效的解決方案
今天小編就為大家分享一篇vue+webpack dev本地調試全局樣式引用失效的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要給大家介紹了關于vue權限路由實現方法的相關資料，文中通過示例代碼介紹地方非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-07-07