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

使用 vite 构建项目: npm create vite

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

(1) 安装 npm install -D eslint
(2) 生成配置文件（初始化配置） npx eslint --init

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

dist
node_modules

"script": {
    "lint": "eslint src",   // 检查
    "fix": "eslint src --fix",  // 修复
}

安装 npm install -D eslint-plugin-prettier prettier eslint-config-prettier

{
    "singleQuote": false,   // 字符串使用单引号
    "semi": false,  // 代码行是否以分号结束
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "ignore",
    "endOfLine": "auto",
    "trailingComma": "all",
    "tabWidth": 2   // tab 缩进
}

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

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 参数 尝试强制解决依赖关系

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
      },
    ],
  },
}

/node_modules/*
/dist/*
/html/*
/public/*

"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"
}

安装：npm install -D husky
初始化： npx husky-init
在生成的.husky/pre-commit 文件 配置提交代码的前置钩子：npm run format

安装：npm add @commitlint/config-conventional @commitlint/cli -D

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],
  },
}

"script": {
    "commitlint": "commitlint --config commitlint.config.cjs -e -V"
}

npx husky add .husky/commit-msg

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

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

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

安装：npm install element-plus --save

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

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

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

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

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"

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 组件并注册为全局组件

注意：需要在入口文件安装插件

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

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

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

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

安装：npm install pinia

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

1、Bug: 菜单收起时，存在二级菜单的条目文本没有被隐藏（暂未解决 -> 傻der玩意儿突然自己就好了）

http://sph-api.atguigu.cn

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：子组件对外暴露方法，再父组件中调用子组件的方法