# 水哥澎湃vue3入门

**Repository Path**: runler/edu-vue3

## Basic Information

- **Project Name**: 水哥澎湃vue3入门
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-15
- **Last Updated**: 2024-01-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

##  Vue3入门项目-后台课程管理系统

from B 站 水哥澎湃 

node 安装 新版本 v18

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



### 一、项目创建

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

  cd edu-vue3
  npm install
  npm run format

  code .  

  npm run dev

### 二、VsCode 插件安装和配置

安装 Volar插件vue3代码辅助插件  

安装 Eslint 代码检查和格式化插件

eslint配置：

Eslint>Format:Enable  

onsave   Editor:Format On Save 

个性编辑 .eslintrc.cjs 

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

### 三、ElementPlus 安装-按需导入-ts类型错误配置

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

```js
// 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']
        })
      ]
    }),
  ],
})
```

解决 ts报错 xxx组件为定义

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

### 四、Icon图标-自动导入-配置

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

```js
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
    })
]

```

使用图标 i-ep-xxxx 或 IEpXxxx 格式

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

### 五、安装sass  重置默认样式

```js
 npm i sass -D
```

下载 到 src/styles/common.scss 通用样式文件  @/assets/images/200.png 有个默认背景

main.ts引入  

import '@/styles/common.scss'

### 六、修改ElementPlus 默认主题色 定制

styles/element/index.scss

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

```

#### scss变量自动导入

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

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

### 设置侧边菜单

布局Layout 和各部分分为组件

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

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

Aside 菜单 

```html
<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;
      }
    }
  }
}

```

头部Header组件

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

```





#### 折叠按钮处理

创建 collapse.ts

```js
export const isCollapse = ref(false)
```

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

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