Element Plus

https://element-plus.org

安装

$ npm install element-plus --save

完整引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

Volar支持

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

按需导入-自动导入

1. 安装unplugin-vue-components 和 unplugin-auto-import

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

修改Vite配置文件

// vite.config.ts
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()],
    }),
  ],
})

参考
https://element-plus.org/zh-CN/guide/installation.html
https://element-plus.org/zh-CN/guide/quickstart.html

unocss&Icon

https://icones.js.org

安装unocss

$ npm install unocss --save

// vite.config.ts
import { presetIcons } from 'unocss'
import unocss from 'unocss/vite'

export default defineConfig({
  // ...
  plugins: [
    // ...
    unocss({
      presets: [presetIcons()]
    })
  ],
})

// main.ts
import 'uno.css'

安装Icon库

以Google Material Icons图标集为例，具体可查看Icônes

$ npm install @iconify-json/ic --save

使用

<template>
<i class="i-ic-baseline-10k icon" />
</template>
<script>
.icon {
  font-size: large;
  position: absolute;
}
</script>

动态引用图标

由于unocss是按需引入，即只在使用到某种图标时才会打包进项目，所以当需要动态引用图标时需要提前引入图标，这里提供的是一种解决方案。

// App.vue
<template>
<i v-if="false" 
    i-ic-baseline-10k />
</template>

Iconify

https://icones.js.org
Iconify for Vue

安装

$ npm install --save-dev @iconify/vue

使用

<template>
<Icon icon="mdi-light:home" />
</template>
<script setup>
import { Icon } from '@iconify/vue';
</script>