使用Element-Plus

官网

https://element-plus.org/zh-CN/

安装

# 选择一个你喜欢的包管理器
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus

Volar 支持

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

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

自动导入组件

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

# 使用npm
$ npm install -D unplugin-vue-components unplugin-auto-import
# 使用yarn
$ yarn add -D unplugin-vue-components unplugin-auto-import

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

Vite

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

Webpack

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

想了解更多打包 (Rollup, Vue CLI) 和配置工具，请参考 unplugin-vue-components 和 unplugin-auto-import。

自动引入样式

需要安装unplugin-element-plus工具：

# 使用npm
$ npm i unplugin-element-plus -D
# 使用yarn
$ yarn add unplugin-element-plus --dev

Vite配置

// vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'
export default {
  plugins: [
    ElementPlus({
      // options
    }),
  ],
}

详情请看：https://github.com/element-plus/unplugin-element-plus

Icon

安装

$ yarn add @element-plus/icons-vue

注册所有图标

// main.ts
// if you're using CDN, please remove this line.
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

使用

放在<el-icon>中

<template>
  <el-icon :size="20">
    <edit />
  </el-icon>
  <el-icon color="#409EFC" class="no-inherit">
    <share />
  </el-icon>
</template>