# vue3-vite-demo

**Repository Path**: linwt0/vue3-vite-demo

## Basic Information

- **Project Name**: vue3-vite-demo
- **Description**: vue3-typescript-vite-pinia
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-11
- **Last Updated**: 2024-11-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 注：这个项目应该保留

# 一、创建 Vue 3 + TypeScript + Vite 项目

      项目初始化命令:pnpm create vite

      完成之后得到最初的 package.json

        {
        "name": "vue3_ts_vite",
        "private": true,
        "version": "0.0.0",
        "type": "module",
        "scripts": {
        "dev": "vite",
        "build": "vue-tsc -b && vite build",
        "preview": "vite preview"
        },
        "dependencies": {
        "vue": "^3.5.12"
        },
        "devDependencies": {
        "@vitejs/plugin-vue": "^5.1.4",
        "typescript": "~5.6.2",
        "vite": "^5.4.9",
        "vue-tsc": "^2.1.6"
        }
        }

      进入到项目根目录pnpm install安装全部依赖
        dependencies:
        + vue 3.5.12

        devDependencies:
        + @vitejs/plugin-vue 5.1.4
        + typescript 5.6.3
        + vite 5.4.10
        + vue-tsc 2.1.6

# 二、安装配置 Eslint

      执行安装命令 pnpm i eslint -D

      得到
      devDependencies:
      + eslint 9.13.0

      执行生成配置文件命令  npx eslint --init
      配置选项：
      √ How would you like to use ESLint? · problems
      √ What type of modules does your project use? · esm
      √ Which framework does your project use? · vue
      √ Does your project use TypeScript? · typescript
      √ Where does your code run? · browser
      The config that you've selected requires the following dependencies:

      eslint, globals, @eslint/js, typescript-eslint, eslint-plugin-vue
      √ Would you like to install them now? · No / Yes
      √ Which package manager do you want to use? · pnpm

      得到
      devDependencies:
      + @eslint/js ^9.13.0
      + eslint-plugin-vue 9.29.1
      + globals 15.11.0
      + typescript-eslint 8.11.0

      到此
       @typescript-eslint规则已经起作用

# 安装配置prettier

      pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

      得到
      devDependencies:
      + eslint-config-prettier 9.1.0
      + eslint-plugin-prettier 5.2.1
      + prettier 3.3.3

      创建.prettierrc.json，添加代码
      {
        "singleQuote": true,
        "semi": false,
        "bracketSpacing": true,
        "htmlWhitespaceSensitivity": "ignore",
        "endOfLine": "auto",
        "trailingComma": "all",
        "tabWidth": 2
      }

      创建.prettierignore忽略文件
      /dist/*
      /html/*
      .local
      /node_modules/**
      **/*.svg
      **/*.sh
      /public/*

# 安装配置stylelint

    stylelint为css的lint工具。可格式化css代码，检查css语法错误与不合理的写法，指定css书写顺序等。

    安装scss作为预处理器命令：

    pnpm 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

# 配置husky

      在上面我们已经集成好了我们代码校验工具，
      但是需要每次手动的去执行命令才会格式化我们的代码。

      如果有人没有格式化就提交了远程仓库中，那这个规范就没什么用。

      所以我们需要强制让开发人员按照代码规范来提交。

      利用husky在代码提交之前触发git hook(git在客户端的钩子)，
      然后执行pnpm run format来自动的格式化我们的代码。

      安装husky
      pnpm install -D husky

      执行
      npx husky-init

      会在根目录下生成个一个.husky目录，
      在这个目录下面会有一个pre-commit文件，
      这个文件里面的命令在我们执行commit的时候就会执行\

      在.husky/pre-commit文件添加如下命令：
      #!/usr/bin/env sh
      . "$(dirname -- "$0")/_/husky.sh"
      pnpm run format

# 配置commitlint

      对于我们的commit信息，也是有统一规范的，
      不能随便写,要让每个人都按照统一的标准来执行，
      我们可以利用commitlint来实现。

      安装包
      pnpm add @commitlint/config-conventional @commitlint/cli -D

      添加配置文件，新建commitlint.config.cjs(注意是cjs)，然后添加下面的代码：
      module.exports = {
        extends: ['@commitlint/config-conventional'],
        // 校验规则
        rules: {
          'type-enum': [
            2,
            'always',
            [
              'feat',
              'fix',
              'docs',
              'style',
              '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],
        },
      }


      在package.json中配置scripts命令
      # 在scrips中添加下面的代码
      {
      "scripts": {
          "commitlint": "commitlint --config commitlint.config.cjs -e -V"
        },
      }


      配置结束，现在当我们填写commit信息的时候，前面就需要带着下面的subject

      'feat',//新特性、新功能
      'fix',//修改bug
      'docs',//文档修改
      'style',//代码格式修改, 注意不是 css 修改
      'refactor',//代码重构
      'perf',//优化相关，比如提升性能、体验
      'test',//测试用例修改
      'chore',//其他修改, 比如改变构建流程、或者增加依赖库、工具等
      'revert',//回滚到上一个版本
      'build',//编译相关的修改，例如发布版本、对项目构建或者依赖的改动


    比如git commit -m "feat:xxx"