vue项目引入Element Plus
vue项目引入Element Plus
·
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、不同方式之间的对比
完整引入——打包体积较大,加载速度慢
按需引入——打包体积小,加载较快,没有过多的操作
手动引入——打包体积小,加载较快,不同页面需要进行引入等,操作较多
相比较而言,更加推荐第二种方式进行引入。
更多推荐
已为社区贡献1条内容
所有评论(0)