vue项目引入Element Plus

1、安装Element Plus
npm install element-plus --save
yarn add element-plus
2、引入方式
2.1、完整引入

在入口文件main.js中引入

//引入elementPlus
import ElementPlus from 'element-plus'
//引入elementPlus样式
import 'element-plus/dist/index.css'
import App from './App.vue'

const app=createApp(App)
//应用elementPlus
app.use(ElementPlus)
app.mount('#app')
2.2、按需引入

按照官方需求安装插件

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

在项目的配置文件中进行配置。
当前项目使用vite进行创建,在vite.config.js文件中进行配置

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'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    //配置以下代码
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})
2.3、手动引入

需要安装 unplugin-element-plus 来导入样式

npm install unplugin-element-plus -s

vite.config.js文件中进行配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入以下代码
import ElementPlus from 'unplugin-element-plus/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    //配置以下代码
    ElementPlus()
  ]
})

使用时,在使用的文件,引入要是引用的组件。

import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
3、不同方式之间的对比

完整引入——打包体积较大,加载速度慢
按需引入——打包体积小,加载较快,没有过多的操作
手动引入——打包体积小,加载较快,不同页面需要进行引入等,操作较多

相比较而言,更加推荐第二种方式进行引入。

Logo

前往低代码交流专区

更多推荐