【Vue工程】008-Element Plus

【Vue工程】008-Element Plus

一、概述

1、官网

https://element-plus.gitee.io/zh-CN

2、Slogan

基于 Vue 3，面向设计师和开发者的组件库。

二、基本使用

1、安装

pnpm add element-plus

2、完整引入

在 main.ts 引入

// 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"]
  }
}

3、按需导入

自动导入

pnpm add unplugin-vue-components unplugin-auto-import -D

在 vite.config.ts 配置

// 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()],
    }),
  ],
})

当前完整 vite.config.ts

import { defineConfig, UserConfigExport } from 'vite';
import vue from '@vitejs/plugin-vue';
// 这个path用到了上面安装的 @types/node1
import path from 'path';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
const config: UserConfigExport = defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  // 在这里进行配置别名
  resolve: {
    alias: {
      // @代替src
      '@': path.resolve('./src'),
      // #代替types
      '#': path.resolve('./types'),
    },
  },
  // 配置 css 预处理器
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/styles/index.scss";',
      },
    },
  },
});

export default config;

4、安装图标

pnpm add @element-plus/icons-vue

5、在 main.ts 引入样式和图标

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
// 导入路由
import router from './router';
// 导入 store
import store from './store';
// 导入 element-plus 样式
import 'element-plus/dist/index.css';
// 导入 element-plus 图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

const app = createApp(App);
// 注册路由
app.use(router);
// 注册 store
app.use(store);
// 注册 element-plus 图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.mount('#app');

6、使用组件

<template>
  <div class="home">home</div>
  <el-button type="primary">hello</el-button>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.home {
  color: $theme-color;
}
</style>

7、访问 http://localhost:5173/home