el-plus

基于 pnpm workspace + ts + element-plus 开发

完整引入

import ElPlus from 'el-plus'
import 'el-plus/dist/index.css'
app.use(ElPlus)

Volar 支持

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

{
  "compilerOptions": {
    // ...
    "types": ["el-plus/global"]
  }
}

按需导入方式1 (简单)

// main.ts
import 'el-plus/dist/index.css' // 引入所有样式
// xx.vue
import { ElButtons } from 'el-plus'

按需导入导入方式2 (待增加)

您需要使用额外的插件来导入要使用的组件。

自动导入 (推荐)

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

import { defineConfig } from 'vite'
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()],
    }),
  ],
})

手动导入

在vue文件中import即可,但需要安装 unplugin-element-plus 来导入样式,配置文档参考docs

<template>
  <el-button>I am ElButton</el-button>
</template>

<script>
import { ElButton } from 'element-plus'

export default {
  components: { ElButton },
}
</script>

import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  // ...
  plugins: [ElementPlus({
   lib:'el-plus'
  })],
})