vue3使用Element Plus 框架

安装

npm安装

npm install element-plus --save

yarn安装

yarn add element-plus --save

配置

完整引入

入口文件main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue'

const app = createApp(App)
createApp(App).use(ElementPlus).mount('#app')

按需引入

首先，安装 vite-plugin-style-import;

//npm
npm install vite-plugin-style-import -D
//yarn 
yarn add vite-plugin-style-import -D

vite.config.js

import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            return `element-plus/lib/theme-chalk/${name}.css`;
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`;
          },
        }
      ]
    })
  ]
  
})

创建useElement.js

import {
    ElAlert,
    ElButton,
    ElCard,
    ElCarousel,
    ElCarouselItem,
    ElCascader,
    ElInfiniteScroll,
    ElLoading,
    ElMessage,
    ElMessageBox,
    ElNotification,
} from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const components = [
    ElAlert,
    ElButton,
    ElCard,
    ElCarousel,
    ElCarouselItem,
    ElCascader,
]

const plugins = [
    ElInfiniteScroll,
    ElLoading,
    ElMessage,
    ElMessageBox,
    ElNotification,
]

export const useElement = (app) => {
    components.forEach(component => {
        app.component(component.name, component)
    })
    plugins.forEach(plugin => {
        app.use(plugin)
    })
}

入口文件 main.js

import { createApp } from 'vue'
import {useElement} from "./utils/useElement"
import App from './App.vue'

const app = createApp(App)
useElement(app)
app.mount("#app")