1，項目起步-初始化項目并使用git管理

創建項目并精細化配置

src目錄調整

git 管理項目

2項目起步-配置別名路徑聯想提示

什么是別名路徑聯想提示

如何進行配置 （自動配置了）

{"compilerOptions" : {"baseUrl" : "./","paths" : {"@/*":["src/*"]}}
}

3 項目起步-elementPlus引入

小兔鮮項目的組件分類

添加ElementPlus到項目（按需導入）

4項目起步-elementPlus主題定制

為什么需要主題定制

如何定制（scss變量替換方案）

1. 安裝sass

基于vite的項目默認不支持css預處理器，需要開發者單獨安裝

npm i sass -D

2. 準備定制化的樣式文件

/* 只需要重寫你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': (// 主色'base': #27ba9b,),'success': (// 成功色'base': #1dc779,),'warning': (// 警告色'base': #ffb302,
),'danger': (// 危險色'base': #e26237,
),'error': (// 錯誤色'base': #cf4444,
),))

3. 自動導入配置

這里自動導入需要深入到elementPlus的組件中，按照官方的配置文檔來

1. 自動導入定制化樣式文件進行樣式覆蓋
2. 按需定制主題配置 （需要安裝 unplugin-element-plus）

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
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'
export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers:[//1.配置elementPlus采用sass樣式配色系統ElementPlusResolver({importStyle:"sass"}),],}),],// 按需定制主題配置ElementPlus({useSource: true,}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},css: {preprocessorOptions: {scss: {// 自動導入定制化樣式文件進行樣式覆蓋additionalData: `@use "@/styles/element/index.scss" as *;`,}}}
})

放到vite.config.js里面

如何驗證主題替換成功