Element Plus UI 安装

安装

?

1 2 3 4 5 6 7 8 9 10

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

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

?

1 2 3 4 5 6 7 8 9 10

// 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')

olar 支持

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

　

?

1 2 3 4 5 6 7

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

Icon 图标

?

1 2 3 4 5 6 7 8

# 选择一个你喜欢的包管理器   # NPM $ npm install @element-plus/icons-vue # Yarn $ yarn add @element-plus/icons-vue # pnpm $ pnpm install @element-plus/icons-vue

注册所有图标

您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

?

1 2 3 4 5 6 7 8 9

// main.ts   // 如果您正在使用CDN引入，请删除下面一行。 import * as ElementPlusIconsVue from '@element-plus/icons-vue'   const app = createApp(App) for (const [key, component] of Object.entries(ElementPlusIconsVue)) {   app.component(key, component) }