欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3引入Element-plus的詳細(xì)步驟記錄

 更新時(shí)間:2022年04月22日 09:45:31   作者:疑似忘川落九天  
Element Plus是為適配Vue3而對(duì)Element UI進(jìn)行重構(gòu)后產(chǎn)生的前端組件庫(kù),包含豐富的基礎(chǔ)組件,下面這篇文章主要給大家介紹了關(guān)于vue3引入Element-plus的相關(guān)資料,需要的朋友可以參考下

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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue項(xiàng)目創(chuàng)建步驟及路由router

    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í)例

    利用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-08
  • Vue中el-form標(biāo)簽中的自定義el-select下拉框標(biāo)簽功能

    Vue中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-04
  • vue中的select綁定多個(gè)值

    vue中的select綁定多個(gè)值

    這篇文章主要介紹了vue中的select綁定多個(gè)值,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • VUE頁(yè)面中加載外部HTML的示例代碼

    VUE頁(yè)面中加載外部HTML的示例代碼

    本篇文章主要介紹了VUE頁(yè)面中加載外部HTML的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解

    Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解

    今天小編就為大家分享一篇Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-08
  • VSCode搭建vue項(xiàng)目的實(shí)現(xiàn)步驟

    VSCode搭建vue項(xiàng)目的實(shí)現(xiàn)步驟

    本文主要介紹了VSCode搭建vue項(xiàng)目的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • Vue WatchEffect函數(shù)創(chuàng)建高級(jí)偵聽器

    Vue WatchEffect函數(shù)創(chuàng)建高級(jí)偵聽器

    watchEffect傳入的函數(shù)會(huì)被立即執(zhí)行一次,并且在執(zhí)行的過(guò)程中會(huì)收集依賴;其次,只有收集的依賴發(fā)生變化時(shí),watchEffect傳入的函數(shù)才會(huì)再次執(zhí)行
    2023-03-03
  • vue解決跨域問(wèn)題的幾種常用方法(CORS)

    vue解決跨域問(wèn)題的幾種常用方法(CORS)

    在Vue中解決跨域問(wèn)題有多種方法,今天通過(guò)本文給大家介紹幾種比較常見的方法,對(duì)vue解決跨域問(wèn)題感興趣的朋友跟隨小編一起看看吧
    2023-05-05
  • vue中使用require動(dòng)態(tài)獲取圖片地址方式

    vue中使用require動(dòng)態(tài)獲取圖片地址方式

    這篇文章主要介紹了vue中使用require動(dòng)態(tài)獲取圖片地址方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-06-06

最新評(píng)論