二，Vue集成UI框架Elemen-Plus

白鹤忘机2024-10-302024-10-30

在 Vue 项目中集成 Element Plus 框架，可以按照以下步骤进行：

1. 安装 Element Plus

首先，在你的 Vue 项目中安装 Element Plus。打开终端，进入项目目录，然后运行以下命令：

npm i element-plus -s

依赖安装完成后就可以在node-modules中找到这个包

2. 引入 Element Plus

在你的 Vue 项目的入口文件中（通常是 main.js 或 main.ts），引入 Element Plus 及其样式文件。


import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import '@/assets/css/global.css'



const app = createApp(App)
app.use(router)
app.use(ElementPlus, {
    locale: zhCn,
})

app.mount('#app')

3.引入icon，图标

在vue项目的目录下输入，以下命令

npm install @element-plus/icons-vue

在main.js里面导入和使用

导入包：


import * as ElementPlusIconsVue from '@element-plus/icons-vue'

使用


for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

4.引入主题色配置文件

安装依赖

在vue目录下使用命令行

npm i sass@1.71.1 -D
npm i unplugin-auto-import -D
npm i unplugin-element-plus -D
npm i unplugin-vue-components -D

配置 index.scss(注意后缀名是 .scss 不是.css）

想了解后缀为 .scss 文件可以看这篇博客 https://www.vinicunca.top/2024/10/30/%E4%B8%89%EF%BC%8C%E5%90%8E%E7%BC%80%E5%90%8D%E4%B8%BAscss%E6%98%AF%E4%BB%80%E4%B9%88%E6%96%87%E4%BB%B6%E5%91%A2_/

@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: (
  "primary": ("base": #0742b1),
  "success": ("base": #2b8f01),
  "warning": ("base": #ffad00),
  "danger": ("base": #e52f2f),
  "info": ("base": #5e41b8),
));

配置 vite.config.js

导入包

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'

使用：

plugins: [
  vue(),
  // 按需定制主题配置
  ElementPlus({
    useSource: true,
  }),
  AutoImport({
    resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
  }),
  Components({
    resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
  }),
],  

css: {
  preprocessorOptions: {
    scss: {
      // 自动导入定制化样式文件进行样式覆盖
      additionalData: `
        @use "@/assets/css/index.scss" as *;
      `,//看这里代码的路径，决定你的index.scss文件放到哪里
    }
  }
},

完整的vite.config.js代码是这样的:

import { fileURLToPath, URL } from 'node:url'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 按需定制主题配置
    ElementPlus({
      useSource: true,
    }),
    AutoImport({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
    }),
  ],

  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入定制化样式文件进行样式覆盖
        additionalData: `
        @use "@/assets/css/index.scss" as *;
      `,//看这里代码的路径，决定你的index.scss文件放到哪里
      }
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})