element-plus的安装使用

最新推荐文章于 2024-06-04 01:01:23 发布

郑建零零发

最新推荐文章于 2024-06-04 01:01:23 发布

阅读量1.3k

点赞数 1

文章标签： npm vue.js node.js

本文链接：https://blog.csdn.net/qq_52421092/article/details/131006942

版权

一、安装

npm install element-plus
yarn add element-plus

二、引入

1、全部引入

main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)  // 全局引入
app.mount('#app')

2、按需引入

安装

npm install -D unplugin-vue-components unplugin-auto-import

viet：用vite构建项目

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
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: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
})

Webpack

webpack.config.js

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
    // ...
    plugins: [
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
}

main.js

import { createApp } from 'vue'
// import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

// app.use(ElementPlus)  // 全局引入
app.mount('#app')