vue3.0+vite+elementPlus+ts项目搭建之二——引入UI组件elementPlus

vue3.0+vite+elementPlus+ts项目搭建之二——引入UI组件elementPlus

一、安装elemenPlus

npm install element-plus --save

二、引入elementPlus

跟elementUI一样有全局引入和按需引入两种方式

1.全局引入

在main.ts中引入

import { createApp } from 'vue'import App from './App.vue'++import ElementPlus from 'element-plus'const app = createApp(App)++app.use(ElementPlus, { size: 'small', zIndex: 3000 }).mount('#app')

引入即可全局使用，但是这种方式会导致打包文件过大

1.按需引入

安装插件

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

配置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'// default defineConfig({ plugins: [ vue(), ++ AutoImport({ resolvers: [ElementPlusResolver()], }), ++ Components({ resolvers: [ElementPlusResolver()], }), ], server: { host: '0.0.0.0' }})

然后在用到的页面进入单独引入即可使用

这种方式大大渐少了包的体积

具体详见官网

​​一个 Vue 3 UI 框架 | Element Plus​​

接下来看

vue3.0+vite+elementPlus+ts项目搭建之二——使用proxy配置代理转发

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。