vue3引入Element-plus的詳細(xì)步驟記錄
vue3引入Element-plus的詳細(xì)步驟
前提是安裝好了npm 以及創(chuàng)建好了vue腳手架
1.打開控制臺(tái)到到你所在的根目錄:
2.輸入引入指令:
npm install element-plus --save
3.等待安裝好后,在腳手文件中打package.json查看是否安裝好
看到有 "element-plus": "^2.1.5"就是安裝好了
4.來(lái)到main.js文件之中,導(dǎo)入element-plus
import { createApp } from 'vue' import App from './App.vue' // 導(dǎo)入element-plus import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('#app')
5.使用,這里有個(gè)實(shí)例element的tab表格,建議創(chuàng)建一個(gè)組件測(cè)試,也可以全部復(fù)制到APP.vue文件中
<template> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="date" label="Date" width="180" /> <el-table-column prop="name" label="Name" width="180" /> <el-table-column prop="address" label="Address" /> </el-table> </template> <script setup> const tableData = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, ] </script>
展示樣式:
官方文檔
一個(gè) Vue 3 UI 框架 | Element Plus
附:vue3 element plus按需引入最優(yōu)雅的用法
vite項(xiàng)目演示
需要用到兩個(gè)插件vite-plugin-style-import、vite-plugin-components這兩個(gè)插件。
先下載npm i vite-plugin-style-import vite-plugin-components -D
然后配置vite.config.js
//vite.config.js import styleImport from 'vite-plugin-style-import' import ViteComponents, { ElementPlusResolver } from 'vite-plugin-components' export default defineConfig({ plugins: [ vue(), //按需導(dǎo)入element-plus組件 ViteComponents({ customComponentResolvers: [ElementPlusResolver()], }), //按需導(dǎo)入element-plus的css樣式 styleImport({ libs: [ { libraryName: 'element-plus', esModule: true, resolveStyle: name => { return `element-plus/lib/theme-chalk/${name}.css` }, }, ], }), })
還需要再去配置main.js嗎? 不需要,安裝完element-plus,配置好vite.config.js就完成了。插件會(huì)自動(dòng)掛載處理。
import { createApp } from 'vue' // import ElementPlus from 'element-plus' // import 'element-plus/lib/theme-chalk/index.css' import App from './App.vue' createApp(App).mount('#app')
這樣只配置一次,每次使用組件的時(shí)候,都會(huì)自己自動(dòng)導(dǎo)入。完美達(dá)成目標(biāo)。
總結(jié)
到此這篇關(guān)于vue3引入Element-plus的文章就介紹到這了,更多相關(guān)vue3引入Element-plus內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 基于Vue3和element-plus實(shí)現(xiàn)登錄功能(最終完整版)
- vue3使用element-plus中el-table組件報(bào)錯(cuò)關(guān)鍵字'emitsOptions'與'insertBefore'分析
- vue3中實(shí)現(xiàn)使用element-plus調(diào)用message
- element-plus 在vue3 中不生效的原因解決方法(element-plus引入)
- Vue3+Element-plus項(xiàng)目自動(dòng)導(dǎo)入報(bào)錯(cuò)的解決方案
- Vue3.x中使用element-plus的各種方式詳解
- vue3?element-plus?實(shí)現(xiàn)表格數(shù)據(jù)更改功能詳細(xì)步驟
相關(guān)文章
vue項(xiàng)目創(chuàng)建步驟及路由router
本文主要給大家分享了vue項(xiàng)目的創(chuàng)建步驟以及vue路由router的相關(guān)知識(shí)點(diǎn),非常的實(shí)用,有需要的小伙伴可以來(lái)參考下2020-01-01利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的方法實(shí)例
輪播圖是前端很常用的一個(gè)網(wǎng)頁(yè)特效,幾乎所有的網(wǎng)站或多或少都會(huì)用到這個(gè)特效。下面這篇文章主要給大家介紹了關(guān)于利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。2017-08-08Vue中el-form標(biāo)簽中的自定義el-select下拉框標(biāo)簽功能
這篇文章主要介紹了Vue中el-form標(biāo)簽中的自定義el-select下拉框標(biāo)簽功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解
今天小編就為大家分享一篇Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08VSCode搭建vue項(xiàng)目的實(shí)現(xiàn)步驟
本文主要介紹了VSCode搭建vue項(xiàng)目的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02Vue WatchEffect函數(shù)創(chuàng)建高級(jí)偵聽器
watchEffect傳入的函數(shù)會(huì)被立即執(zhí)行一次,并且在執(zhí)行的過(guò)程中會(huì)收集依賴;其次,只有收集的依賴發(fā)生變化時(shí),watchEffect傳入的函數(shù)才會(huì)再次執(zhí)行2023-03-03vue中使用require動(dòng)態(tài)獲取圖片地址方式
這篇文章主要介紹了vue中使用require動(dòng)態(tài)獲取圖片地址方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06