vue项目引入Element Plus_vue 2 element-plus 引入项目

vue项目引入Element Plus

1、安装Element Plus

npm install element-plus --save
yarn add element-plus
1
2

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')
1
2
3
4
5
6
7
8
9
10

2.2、按需引入

按照官方需求安装插件

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

在项目的配置文件中进行配置。
当前项目使用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()],
    }),
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.3、手动引入

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

npm install unplugin-element-plus -s
1

在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()
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13

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

import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
1
2
3
4

3、不同方式之间的对比

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

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