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'

// https://vitejs.dev/config/
export 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配置代理转发