# project

**Repository Path**: ke-lin/project

## Basic Information

- **Project Name**: project
- **Description**: 使用Vite构建工具实现的基于 Vue3 + Typescript 的后台管理系统模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-11
- **Last Updated**: 2025-06-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vite, Vue, TypeScript, Pinia, element-plus

## README

# 硅谷甄选运营平台项目实现过程记录

## 一、项目初始化

### 1.1 初始化项目
    使用 vite 构建项目: npm create vite

### 1.2 代码规范：
    1、使用 eslint + stylelint + prettier 来对代码质量检测和修复
    2、使用 husky 来做 commit 拦截
    3、使用 commitlint 来统一提交规范
    4、使用 preinstall 来统一包管理工具（暂时没有配置）

## 二、项目配置

### 2.1 配置eslint（语法检查工具）
    (1) 安装 npm install -D eslint
    (2) 生成配置文件（初始化配置） npx eslint --init

#### 2.1.1 vue3环境代码校验插件
    npm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier @babel/eslint-parser

    说明：
        让所有与 prettier 规则存在冲突的 eslint规则失效，并使用 prettier 进行代码检查 eslint-plugin-import、 eslint-config-prettier、 eslint-plugin-node
        允许使用 eslint 校验所有的 babel code：@babel/eslint-parser

#### 2.1.2 修改 .eslintrc.cjs 配置文件

#### 2.1.3 .eslintignore忽略文件配置
    dist
    node_modules

#### 2.1.4 运行脚本
    "script": {
        "lint": "eslint src",   // 检查
        "fix": "eslint src --fix",  // 修复
    }

### 2.2 配置prettier（格式化工具）
    安装 npm install -D eslint-plugin-prettier prettier eslint-config-prettier

#### 2.2.2 添加 .prettierrc.json 配置规则
    {
        "singleQuote": false,   // 字符串使用单引号
        "semi": false,  // 代码行是否以分号结束
        "bracketSpacing": true,
        "htmlWhitespaceSensitivity": "ignore",
        "endOfLine": "auto",
        "trailingComma": "all",
        "tabWidth": 2   // tab 缩进
    }

#### 2.2.3 .prettierignore 忽略文件配置
    /dist/*
    /html/*
    .local
    /node_modules/**
    **/*.svg
    **/*.sh
    /public/*

### 2.3 配置 styleLint
    npm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D
    安装依赖时出现依赖冲突，添加 --force 参数 尝试强制解决依赖关系

#### 2.3.2 添加 .stylelintrc.cjs 配置文件
```javascript
module.exports = {
  extends: [
    'stylelint-config-standard', // 配置 stylelint 拓展插件
    'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
    'stylelint-config-standard-scss', // 配置 stylelint css插件
    'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
    'stylelint-config-recess-order', // 配置 stylelint css 属性书写顺序插件
    'stylelint-config-prettier', // 配置 stylelint 和 prettier 兼容
  ],
  overrides: [
    {
      files: ['**/*.(scss|css|vue|html)'],
      customSyntax: 'postcss-scss',
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html',
    },
  ],
  ignoreFiles: [
    '**/*.js',
    '**/*.jsx',
    '**/*.ts',
    '**/*.tsx',
    '**/*.json',
    '**/*.md',
    '**/*.yaml',
  ],
  /**
   * null     =>      关闭该规则
   * always   =>      必须
   * */
  rules: {
    'value-keyword-case': null, // 在 css 中使用 v-bind 不报错
    'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的
    'function-url-quotes': 'always', // 要求URL的必须加上引号
    'no-empty-source': null, // 关闭禁止空源码
    'selector-class-pattern': null, // 关闭强制选择器类名的格式
    'property-no-unknown': null, // 禁止未知的属性（true 为不允许）
    'block-opening-brace-space-before': 'always', // 大括号前必须有一个空格或不能有
    'value-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-box
    'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
    'selector-pseudo-class-no-unknown': [
      // 不允许未知的选择器
      true,
      {
        ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改element
      },
    ],
  },
}
```

#### 2.3.3 .stylelintignore 忽略文件配置
    /node_modules/*
    /dist/*
    /html/*
    /public/*

#### 2.3.4 运行脚本
    "script": {
        "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",  // 格式化代码命令行
        "lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
        "lint-style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
    }

### 2.4 配置 husky（强制按照规范格式提交代码）
    安装：npm install -D husky
    初始化： npx husky-init
    在生成的.husky/pre-commit 文件 配置提交代码的前置钩子：npm run format

### 2.5 配置 commitLint
    安装：npm add @commitlint/config-conventional @commitlint/cli -D

#### 2.5.1 添加配置文件 commitlint.config.cjs
```js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 校验规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新特性、新功能
        'fix', // 修改bug
        'docs', // 文档修改
        'style', // 代码格式修改，注意不是css修改
        'refactor', // 代码重构
        'perf', // 优化相关，比如性能提升、体验
        'test', // 测试用例修改
        'chore', // 其他修改，比如改变构建流程、或者增加依赖库、工具等
        'revert', // 回滚版本
        'build', // 编译相关的修改，比如发布版本、对项目构建或以来的改动
      ],
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72],
  },
}
```

#### 2.5.2 添加运行脚本
    "script": {
        "commitlint": "commitlint --config commitlint.config.cjs -e -V"
    }

#### 2.5.3 配置 husky
    npx husky add .husky/commit-msg

    在生成的commit-msg文件配置 npm run commitlint

    注意：提交代码的命令格式：git commit -m 'fix: xxx'

    必须是英文冒号，且冒号后面有一个空格

## 三、项目集成

### 3.1 element-plus 集成
    安装：npm install element-plus --save

    安装图标组件库：npm install @element-plus/icons-vue

    参考 element-plus 官网配置组件的自动导入（官网推荐用法）【如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便】

### 3.2 src文件夹别名配置
    1、vite.config.ts 添加配置代码
        resolve: {
            alias: {
                "@": path.resolve('./src')  // 相对路径配置别名 用 @ 代替 src
            }
        }

    2、tsconfig.json 添加配置代码
        "compilerOptions": {
            "baseUrl": "./",
            "paths": {
                "@/*": ["src/*"]
            }
        }

### 3.3 项目环境变量的配置
    1、分别配置开发、测试、生产环境的文件！
        .env.test
        .env.development
        .env.production

    2、在 package.json 文件中修改打包脚本
        "build:test": "vue-tsc && vite build --mode test",
        "build:prod": "vue-tsc && vite build --mode production"

### 3.4 SVG图标配置
    1、安装依赖插件：npm install vite-plugin-svg-icons -D

    2、在 vite.config.ts 配置插件
        createSvgIconsPlugin({
            // process.cwd() 是 Node.js 的一个内置方法，用于获取当前工作目录的路径。
            iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
            symbolId: 'icon-[dir]-[name]'
        })

    3、封装 svg-icon 组件并注册为全局组件

### 3.5 自定义插件用于注册全局组件
    注意：需要在入口文件安装插件

### 3.6 集成 scss
    添加全局样式
     1、清除默认样式 (reset.scss)
     2、配置全局变量 (variable.scss)
        在 vite.config.ts 文件进行配置
            css: {
                preprocessorOptions: {
                    // 配置 scss 全局变量
                    scss: {
                        javascriptEnabled: true,
                        additionalData: '@import "./src/styles/variable.scss";'
                    }
                }
            }

### 3.7 mock 数据
    1、安装：npm install vite-plugin-mock mockjs -D
    2、具体配置参考：https://github.com/vbenjs/vite-plugin-mock

### 3.8 axios 二次封装
    1、安装：npm install axios
    2、实现二次封装并对外暴露

### 3.9 API接口的统一管理

### 3.10 模块的路由配置
    1、安装路由管理插件：npm install vue-router
    2、实现路由配置并对外暴露，然后挂载到应用上

### 3.11 pinia数据存储仓库
    安装：npm install pinia

    将网络请求写在 Pinia 的 actions 中通常是更好的选择，因为这样可以将数据逻辑和状态管理逻辑分离开来，使代码更加模块化和可维护。
    将网络请求放在组件内部可能会导致以下问题：
        1、重复代码：如果多个组件需要进行相同的网络请求，将其放在组件内部会导致代码重复。而将网络请求封装在 Pinia 的 actions 中，可以在多个组件中共享和复用。
        2、代码耦合：将网络请求放在组件内部会导致组件与网络请求逻辑紧密耦合在一起，导致代码难以理解和维护。而将网络请求放在 Pinia 的 actions 中，可以使组件更专注于渲染和交互逻辑，而不必关心网络请求的具体实现。
        3、单一职责原则：组件应该专注于 UI 的展示和用户交互，而不是处理数据逻辑。将网络请求放在 Pinia 的 actions 中可以遵循单一职责原则，使代码更加清晰和可读。

## 四、 数据大屏适配
    方案一：vw和vh
    方案二：scale（缺点：会有留白问题）
    方案三：rem：目前最推荐模式

## 五、权限控制
### 5.1 菜单权限控制
    目前项目的所有路由： 
        login、404、任意路由、首页Home、数据大屏、权限管理（包含三个子路由）、商品管理（包含四个子路由）
#### 5.1.1 拆分路由
    静态（常量）路由：所有人都拥有的路由
        login、404、首页Home、数据大屏
    异步路由：根据不同权限能获取到的不同路由
        权限管理（包含三个子路由）、商品管理（包含四个子路由）
    任意路由

### 5.2 按钮权限控制

## 六、后台相关
### 6.1 服务器域名
    http://sph-api.atguigu.cn
### 6.2 接口文档地址
    http://39.98.123.211:8510/swagger-ui.html
    http://139.198.104.58:8212/swagger-ui.html#/

## 七、总结
    使用到的组件间通讯方式：
        1、props：父组件向子组件传递数据
        2、emit：自定义事件，子组件向父组件传递数据
        3、v-model：双向数据绑定
        4、pinia：状态管理
        5、defineExpose：子组件对外暴露方法，再父组件中调用子组件的方法

    数据大屏的开发其实主要的问题是显示适配问题