Vite2.0 按需引入Element Plus

  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>