vue3引入Element-plus的詳細步驟記錄

更新時間：2022年04月22日 09:45:31 作者：疑似忘川落九天

Element Plus是為適配Vue3而對Element UI進行重構后產生的前端組件庫,包含豐富的基礎組件,下面這篇文章主要給大家介紹了關于vue3引入Element-plus的相關資料,需要的朋友可以參考下

vue3引入Element-plus的詳細步驟

前提是安裝好了npm 以及創(chuàng)建好了vue腳手架

1.打開控制臺到到你所在的根目錄：

2.輸入引入指令：

npm install element-plus --save

3.等待安裝好后，在腳手文件中打package.json查看是否安裝好

看到有 "element-plus": "^2.1.5"就是安裝好了

4.來到main.js文件之中，導入element-plus

import { createApp } from 'vue'
import App from './App.vue'
// 導入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

5.使用，這里有個實例element的tab表格，建議創(chuàng)建一個組件測試，也可以全部復制到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>

展示樣式：

官方文檔

一個 Vue 3 UI 框架 | Element Plus

附：vue3 element plus按需引入最優(yōu)雅的用法

vite項目演示

需要用到兩個插件vite-plugin-style-import、vite-plugin-components這兩個插件。

先下載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(),
        //按需導入element-plus組件
        ViteComponents({
            customComponentResolvers: [ElementPlusResolver()],
        }),
        //按需導入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就完成了。插件會自動掛載處理。

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')

這樣只配置一次，每次使用組件的時候，都會自己自動導入。完美達成目標。