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

## 完整引入

```bash
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 (<b style="color:red">简单</b>)
```js
// main.ts
import 'el-plus/dist/index.css' // 引入所有样式
// xx.vue
import { ElButtons } from 'el-plus'

```
## 按需导入导入方式2 (待增加)
您需要使用额外的插件来导入要使用的组件。
### 自动导入 (<b style="color:red">推荐</b>)
首先你需要安装[`unplugin-vue-components`](https://github.com/unplugin/unplugin-vue-components#installation) 和 [`unplugin-auto-import`](https://github.com/unplugin/unplugin-auto-import#install)这两款插件
``` bash
$ npm install -D unplugin-vue-components unplugin-auto-import
```
然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

```js
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](https://github.com/element-plus/unplugin-element-plus#readme)
``` js
<template>
  <el-button>I am ElButton</el-button>
</template>

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

export default {
  components: { ElButton },
}
</script>
```
```js
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

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