Vite 作為下一代開發和構建工具，擁有快速的熱過載開發體驗，讓開發大型專案有著極好的開發體驗。element 也為 Vue3 開發了 element plus。

環境支援

• Element Plus 可以在 ES2018 和 ResizeObserver 的瀏覽器執行，低版本瀏覽器需要自己新增 babel 和 Polyfill

• 不在支援 IE 瀏覽器

安裝

• npm install element-plus --save

或者

• pnpm install element-plus

按需引入

• npm install unplugin-vue-components -D

• npm install unplugin-auto-import -D

  (在最後的測試過程中，不需要引入這個依賴也行，但是還是建議可以先引入)

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}
 

  到這裡也可以使用，但是有個問題就是需要在 main.js 引入對應的元件的css 檔案，要不沒樣式，這個開始糾結(emo)了一會。所以可以引入以下的依賴解決

• npm install vite-plugin-style-import -D

import styleImport from 'vite-plugin-style-import';
export default defineConfig({
  plugins: [
    styleImport({
      libs: [{
        libraryName: 'element-plus',
        esModule: true,
        // 按需引入 css
        resolveStyle: (name) => {
          return `element-plus/lib/theme-chalk/${name}.css`
        },
      }]
    })
  ],
 

使用

<template>
  <div>
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Hello Vue 3 + Vite" />
    <el-button type="warning" round>Default</el-button>
    <el-steps :space="200" :active="1" finish-status="success" align-center>
      <el-step title="Done"></el-step>
      <el-step title="Processing"></el-step>
      <el-step title="Step 3"></el-step>
    </el-steps>
    <el-link type="success">success</el-link>
  </div>
</template>

<script setup>
import HelloWorld from '../components/HelloWorld.vue'

</script>