npm install -g npm  // 升级npm到最新版

 npm create vue@latest
// 以下项 选 Yes
√ Add TypeScript? ... / Yes
√ Add Vue Router for Single Page Application development? ...  / Yes
√ Add Pinia for state management? ...  / Yes
√ Add ESLint for code quality? ...  / Yes
√ Add Prettier for code formatting? ...  / Yes

//   个性化格式配置
  rules: {
    'vue/multi-word-component-names': 0, // 不再强制要求组件命名
    'prettier/prettier': [
      'error',
      {
        semi: false, // 每行结尾符 ；取消
        wrapAttributes: false, // 属性单独占一行关闭
        printWidth: 100, // 每行最大字符数
        endOfLine: 'auto' // 换行符根据系统自动配置
      }
    ]
  }

npm install element-plus --save
// 安装 按需自动导入2个插件
npm install -D unplugin-vue-components unplugin-auto-import

// 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: [
    vue(),
    // 按需自动导入
    AutoImport({
      imports: ['vue'], // 自动导入vue 相关函数，如：ref, reactive, toRef 等，也可增加vue-router自动导入
      eslintrc: { enabled: true }, // 解决eslint 报no-undef错误，会生成.eslintrc-auto-import.json文件,在.eslintrc.cjs的extends：中加入
       // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
       resolvers: [
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon'
        })
      ]
    }),
    Components({
       resolvers: [
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep']
        })
      ]
    }),
  ],
})

// tsconfig.json
{
    "include": [ ..., "auto-imports.d.ts", "components.d.ts"],  // ts指定识别文件
}

npm install @element-plus/icons-vue
npm i -D unplugin-icons  // 图标自动导入插件  还需要unplugin-auto-import 上面已安装了

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

plugins:[
    AutoImport({
        resolvers: [
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon'
        })
      ]
    }),
    
    Components({
       resolvers: [
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep']  // 使用element-plus图标集
        })
      ]
    })，
    
    // 自动导入图标
    Icons({
      autoInstall: true
    })
]

<el-icon ><i-ep-setting /></el-icon>  
<el-icon :size="20" color="#409EFC"><IEpUser /></el-icon>  

 npm i sass -D

/* 只需要重写你需要的即可 */
@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,
    ),
  )
);

// vite.config.js
  plugins: [
   ...
    Components({
      resolvers: [
        // 1 配置elementPlus使用sass
        ElementPlusResolver({ importStyle: "sass" }),
      ],
    }),
  ],

//  预解析样式
  css: {
    preprocessorOptions: {
      scss: {
        // 2 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      },
    },
  },

// src/styles/var.scss
$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;

css: {
    preprocessorOptions: {
      scss: {
        // 自动导入scss文件
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `,
      }
    }
}

    <el-container>
      <AppAside />
      <el-container class="headerAndMain">
        <AppHeader />
        <el-main>Main</el-main>
      </el-container>
    </el-container>

// 头部组件化后，要设置flex上下排列
.headerAndMain {
  display: flex;
  flex-direction: column;
}

<el-scrollbar>  // 美化 滚动条
    //  菜单开启路由 子菜单单一打开  折叠
    <el-menu router unique-opened :collapse="isCollapse">
        // 项目图标和项目名 折叠隐藏名称 
        <a href="/" class="logo">
          <img src="@/assets/logo.svg" alt="" />
          <h1>水哥澎湃</h1>
        </a>
        // 菜单项  
        <el-menu-item index="/roles">
            //  菜单图标 和 文字
        	 <el-icon><IEpSetting /></el-icon>  <span>用户管理</span>
        </el-menu-item>
        // 子菜单项
        <el-sub-menu index="2">
          <template #title>
            <el-icon><IEpSetting /></el-icon><span>广告管理</span>
          </template>
          <el-menu-item index="/advertisement">
            <el-icon><IEpSetting /></el-icon><span>广告列表</span>
          </el-menu-item>
          <el-menu-item index="/advert-space">
            <el-icon><IEpSetting /></el-icon><span>广告位设置</span>
          </el-menu-item>
        </el-sub-menu>
    </el-menu>

</el-scrollbar>

# scss
.el-aside {
  background-color: #eee;
  height: 100vh;
  width: auto;
  .el-menu {
    background-color: #eee;
    border-right: none;
    width: 200px;
    &.el-menu--collapse {
      width: 60px;
      & h1 {
        display: none;
      }
    }
    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      color: black;
      height: 60px;
      img {
        width: 32px;
        height: 32px;
      }
    }
  }
}

<script setup lang="ts">
import { isCollapse } from './collapse'
</script>
<template>
  <el-header>
    <!-- 图标 -->
    <el-icon @click="isCollapse = !isCollapse" size="20">
      <IEpExpand v-show="isCollapse" />
      <IEpFold v-show="!isCollapse" />
    </el-icon>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="/roles">角色列表</a></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 下拉菜单 -->
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar :size="40" src="/src/assets/images/avatar_1.jpeg" />
        <el-icon class="el-icon--right" size="20">
          <IEpArrowDown />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>张三丰</el-dropdown-item>
          <el-dropdown-item divided>退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-header>
</template>
<style scoped lang="scss">
.el-header {
  display: flex;
  align-items: center;
  background-color: #82cbfc;

  // 折叠图标与面包屑间距
  .el-icon {
    margin-right: 17px;
  }

  // 头像下拉菜单 到右边
  .el-dropdown {
    margin-left: auto;
    // 图像和箭头居中
    .el-dropdown-link {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>

export const isCollapse = ref(false)

// 使用
import { isCollapse } from './collapse'

<el-icon @click="isCollapse = !isCollapse" size="20">