项目初始化

一、创建项目

1.1 使用create-vite创建项目

1. 初始化项目

   pnpm create vite
   

2. 安装依赖

   cd 项目名pnpm i
   

1.2 自动打开浏览器

1. 修改package.json文件的运行命令脚本

   "scripts": {"dev": "vite --open","build": "vue-tsc && vite build","preview": "vite preview"
   },
   

二、配置ESLint

ESlint中文网

ESLint是一个用于识别ECMAScript并按照规则给出报告的代码检测工具。它主要用于统一代码风格规则、减少错误、提高代码质量，并帮助开发者避免低级错误。

2.1 安装依赖

1. 使用pnpm下载eslint

   pnpm i eslint -D
   

2.2 创建配置文件

1. 创建.eslintrc.cjs配置文件

   npx eslint --init
   

   根据提示进行选择，会自动在项目根目录生成.eslintrc.cjs配置文件。

   • env：设置eslint的工作环境
   • extends：继承现有的校验规则
   • overrides：为特定的类型的文件指定处理器
   • parserOptions：指定解析器选项
   • plugins：为eslint配置插件
   • rules：校验规则

   module.exports = {"env": {"browser": true,"es2021": true,"node": true},"extends": ["eslint:recommended","plugin:@typescript-eslint/recommended","plugin:vue/vue3-essential"],"overrides": [{"env": {"node": true},"files": [".eslintrc.{js,cjs}"],"parserOptions": {"sourceType": "script"}}],"parserOptions": {"ecmaVersion": "latest","parser": "@typescript-eslint/parser","sourceType": "module"},"plugins": ["@typescript-eslint","vue"],"rules": {}
   }
   

2. 安装Vue3环境的代码校验插件

   • eslint-plugin-prettier：将Prettier的格式化规则集成到ESLint中，通过该插件，ESLint不仅能够检查代码风格和格式，还能自动修复不符合Prettier规则的代码。
   • eslint-config-prettier：让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
   • eslint-plugin-import：对导入的模块进行排序，排序后的代码看起来更整洁，外部库、公共组件、子组件、api、工具类依次排列
   • eslint-plugin-node：添加对node的eslint支持
   • eslint-plugin-vue：vue.js的Eslint插件，检查 Vue 文件中的 <template> 和 <script> 部分，以及 JS 文件中的 Vue 代码（如 mixins 等）。
   • @babel/eslint-parser：能够解析由 Babel 转换的源代码
   • eslint-plugin-html：检测html文件script标签里的js代码
   • eslint-plugin-json：检查 JSON 文件的格式和结构
   • eslint-plugin-promise：增强对 JavaScript Promise 的 linting 支持

   安装常用的插件

   pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier @babel/eslint-parser
   

3. 修改.eslintrc.cjs配置文件

   // @see https://eslint.bootcss.com/docs/rules/module.exports = {env: {browser: true,es2021: true,node: true,jest: true,},/* 指定如何解析语法 */parser: 'vue-eslint-parser',/** 优先级低于 parse 的语法解析配置 */parserOptions: {ecmaVersion: 'latest',sourceType: 'module',parser: '@typescript-eslint/parser',jsxPragma: 'React',ecmaFeatures: {jsx: true,},},/* 继承已有的规则 */extends: ['eslint:recommended','plugin:vue/vue3-essential','plugin:@typescript-eslint/recommended','plugin:prettier/recommended',],plugins: ['vue', '@typescript-eslint'],/** "off" 或 0    ==>  关闭规则* "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）* "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）*/rules: {// eslint（https://eslint.bootcss.com/docs/rules/）'no-var': 'error', // 要求使用 let 或 const 而不是 var'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-unexpected-multiline': 'error', // 禁止空余的多行'no-useless-escape': 'off', // 禁止不必要的转义字符// typeScript (https://typescript-eslint.io/rules)'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型'@typescript-eslint/no-non-null-assertion': 'off','@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。'@typescript-eslint/semi': 'off',// eslint-plugin-vue (https://eslint.vuejs.org/rules/)'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用'vue/no-mutating-props': 'off', // 不允许组件 prop的改变'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式},
   }
   

2.3 创建忽略文件

1. 项目根目录下创建.eslintignore忽略文件

   dist
   node_modules
   

2.4 添加运行脚本指令

1. 在package.json文件新增脚本指令

   "scripts": {"lint": "eslint src","fix": "eslint src --fix"
   },
   

三、配置Prettier

ESLint 是一个强大的静态代码检查工具，主要用于识别和报告 JavaScript 代码中的模式问题，如语法错误、未使用的变量、代码风格问题等。它的目标是帮助开发者遵循最佳实践，避免错误，并统一代码风格。

Prettier 的主要任务则是代码格式化。它通过解析代码、重新构建抽象语法树（AST）并重新生成代码，自动将代码转换为统一的格式。

ESLint 和 Prettier 在前端项目中可以协同工作。ESLint 负责检测代码中的潜在问题和风格问题，而 Prettier 则负责自动调整代码格式，使其符合预设的规范和风格。

3.1 安装依赖

1. 安装prettier和相关插件

   pnpm i -D prettier eslint-plugin-prettier eslint-config-prettier
   

3.2 创建配置文件

1. 手动创建.prettierrc.json配置文件

   {"singleQuote": true,"semi": false,"bracketSpacing": true,"htmlWhitespaceSensitivity": "ignore","endOfLine": "auto","trailingComma": "all","tabWidth": 2
   }
   

3.3 创建忽略文件

1. 创建.prettierignore忽略文件

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

3.4 添加运行脚本指令

1. 在package.json添加运行脚本指令

   "scripts": {"format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
   },
   

四、配置stylelint

stylelint是一款强大的现代化CSS/SCSS/Less代码检查工具，旨在帮助开发者编写符合规范的高质量样式代码。它拥有大量的规则集，可以检查代码中的各种潜在问题，如语法错误、样式冗余、选择器性能问题等。stylelint的目的是通过自动化检查和修复样式代码中的问题，提高代码的可读性、可维护性和性能。

4.1 安装依赖

1. 安装常用的依赖

   pnpm install -D 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
   

4.2 创建配置文件

1. 创建.stylelintrc.cjs配置文件

   官网

   // @see https://stylelint.bootcss.com/module.exports = {extends: ['stylelint-config-standard', // 配置stylelint拓展插件'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化'stylelint-config-standard-scss', // 配置stylelint scss插件'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','**/*.tsx','**/*.ts','**/*.json','**/*.md','**/*.yaml',],/*** null  => 关闭该规则* always => 必须*/rules: {'value-keyword-case': null, // 在 css 中使用 v-bind，不报错'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"'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默认样式的时候能使用到},],},
   }
   

4.3 创建忽略文件

1. 创建.stylelintignore忽略文件

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

4.4 添加运行脚本指令

1. 在package.json添加运行脚本指令

   "scripts": {"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
   },
   

五、配置husky

Husky是一个用于设置Git hooks（钩子）的工具。它允许开发者在Git操作前或后执行自定义的脚本，如代码格式化、代码质量检查、单元测试等，从而帮助团队保持一致的代码质量和开发流程。

5.1 安装依赖

1. 安装husky

   pnpm i husky -D
   

5.2 创建配置文件

1. 使用命令，生成配置文件（前提：需要当前项目已经已经被git初始化，git init）

   npx husky-init
   

   执行上面命令，会自动生成.husky目录，我们可以在目录里面的pre-commit编写执行脚本

2. 编写pre-commit文件内容

   #!/usr/bin/env sh
   . "$(dirname -- "$0")/_/husky.sh"pnpm run format
   

六、配置commitlint

commitlint是一个git commit校验约束工具，用于检查Git提交消息是否符合特定格式规则。当运行git commit命令并附加提交信息时，commitlint会检查这些提交信息是否满足团队约定的提交规范。

6.1 安装依赖

1. 安装相关依赖

   pnpm add @commitlint/config-conventional @commitlint/cli -D
   

6.2 创建配置文件

1. 创建commitlint.config.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],},}
   

6.3 添加运行脚本指令

1. 在package.json添加运行脚本指令

   "scripts": {"commitlint": "commitlint --config commitlint.config.cjs -e -V"
   },
   

6.4 配置husky相关钩子

1. 生成commit-msg文件

   npx husky add .husky/commit-msg
   

   执行此命令，会自动生成commit-msg文件，可以在其中编写执行脚本

   

2. 编写commit-msg文件内容

   #!/usr/bin/env sh
   . "$(dirname -- "$0")/_/husky.sh"pnpm commitlint
   

   编写完配置后，当我们 commit 提交信息时，就不能再随意写了，必须是 git commit -m 'fix: xxx' 符合类型的才可以。

   常用类型如下：

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

七、统一包管理器工具

团队开发项目的时候，需要统一包管理器工具,因为不同包管理器工具下载同一个依赖，可能版本不一样，

导致项目出现bug问题,因此包管理器工具需要统一管理！！！

7.1 创建脚本文件

1. 在根目录创建scritps/preinstall.js文件，添加下面的内容

   if (!/pnpm/.test(process.env.npm_execpath || '')) {console.warn(`\u001b[33mThis repository must using pnpm as the package manager ` +` for scripts to work properly.\u001b[39m\n`,)process.exit(1)
   }
   

7.2 添加运行脚本指令

1. 在package.json添加运行脚本指令

   "scripts": {"preinstall": "node ./scripts/preinstall.js"
   }
   

   当我们使用npm或者yarn来安装依赖的时候，就会报错了。

   原理就是在install的时候会触发preinstall（npm提供的生命周期钩子）这个文件里面的代码。

八、src别名

1. 配置vite.config.ts文件

   // vite.config.ts
   import {defineConfig} from 'vite'
   import vue from '@vitejs/plugin-vue'
   import path from 'path'
   export default defineConfig({plugins: [vue()],resolve: {alias: {"@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src}}
   })
   

2. 配置tsconfig.json文件

   // tsconfig.json
   {"compilerOptions": {"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录"paths": { //路径映射，相对于baseUrl"@/*": ["src/*"] }}
   }
   

九、环境变量

9.1 创建.env文件

1. 在项目根目录创建如下文件

   .env.development
   .env.production
   .env.test
   

9.2 定义环境变量

1. 在.env文件中定义环境变量（前缀需要是VITE，可以配置修改前缀）

   VITE_SERVE = '127.0.0.1'
   VITE_APP_NAME = '测试'
   

9.3 使用环境变量

1. 在项目中使用定义的环境变量

   import.meta.env