【Vue工程】008-Element Plus

朴灿烈づ我的快乐病毒、 2023-09-27 21:20 100阅读 0赞

## 【Vue工程】008-Element Plus ##

#### 文章目录 ####

*  【Vue工程】008-Element Plus
 *  一、概述
 *   *  1、官网
     *  2、Slogan
 *  二、基本使用
 *   *  1、安装
     *  2、完整引入
     *   *  在 \`main.ts\` 引入
         *  Volar 支持
     *  3、按需导入
     *   *  自动导入
         *  在 \`vite.config.ts\` 配置
         *  当前完整 \`vite.config.ts\`
     *  4、安装图标
     *  5、在 \`main.ts\` 引入样式和图标
     *  6、使用组件
     *  7、访问 \`http://localhost:5173/home\`

## 一、概述 ##

### 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` ###

![image-20230511231521059][]

[image-20230511231521059]: https://img-blog.csdnimg.cn/img_convert/3857fd55e115dcf15361b27126e17753.png