[!info] 包管理器使用 pnpm，编辑器使用 vscode，前端框架使用 vue

初始化项目

pnpm create vue

Eslint

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

使用vscode，可以下载下面的插件

VsCode 插件

名称: ESLint
ID: dbaeumer.vscode-eslint
说明: Integrates ESLint JavaScript into VS Code.
版本: 3.0.16
发布者: Microsoft
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

将 Prettier 的格式’错误’设为 Warning

设置 eslint.config.js

import prettierPlugin from 'eslint-plugin-prettier'

export default defineConfig([
  // 注意这段一定要放在最下面
  // 不然有可能触发warn不生效的bug
  {
    languageOptions: {
      globals: {
        ...globals.browser,
      },
    },
    plugins: {
      prettier: prettierPlugin,
    },
    rules: {
      'prettier/prettier': [
        'warn',
        {
          // 这里copy .prettierrc.json 的内容即可
          $schema: 'https://json.schemastore.org/prettierrc',
          semi: false,
          singleQuote: true,
          printWidth: 100,
        },
      ],
    },
  },
])

Prettier

Prettier · Opinionated Code Formatter · Prettier

VsCode 插件

名称: Prettier - Code formatter
ID: esbenp.prettier-vscode
说明: Code formatter using prettier
版本: 11.0.0
发布者: Prettier
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Vscode 的默认格式化程序要选择prettier

Pinia

Pinia | The intuitive store for Vue.js

项目配置

包管理器限制

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

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

配置文件

在根目录创建 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)
}

如果 process 报错了，在 eslint.config.js 添加 ...globals.node

export default defineConfig([
// .......

  {
    languageOptions: {
      globals: {
        ...globals.browser,
        // 提供全局nodejs变量环境
        ...globals.node,
      },
    },
    plugins: {
      prettier: prettierPlugin,
    },
    rules: {
      'prettier/prettier': [
        'warn',
        {
          $schema: 'https://json.schemastore.org/prettierrc',
          semi: false,
          singleQuote: true,
          printWidth: 100,
        },
      ],
    },
  },
])

这样 eslint 就会知道 process 是有定义的，而不会报 undefined

配置命令

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

当我们使用 npm 或者 yarn 来安装包的时候，就会报错了。原理就是在 install 的时候会触发 preinstall（npm 提供的生命周期钩子）这个文件里面的代码。

Husky

[!info] Husky 是一个 git hooks 工具 ( git 的钩子工具，可以在特定时机执行特定的命令 )

Husky

安装

pnpm install -D husky

执行

npx husky-init

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

Commit 前格式化

在 .husky/pre-commit 文件添加如下命令：

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

pnpm format

当我们对代码进行 commit 操作的时候，就会执行命令，对代码进行格式化，然后再提交。

[!tip] 记得在 package.json 配置好 format 命令

lint-staged 配置

lint-staged - npm

[!info] Staged，顾名思义，就是对缓存区的代码负责，也就是我们只对自己写的代码负责，不管历史文件。

我们要实现只对缓冲区的代码进行 eslint --fix，防止 eslint 修改不应该修改的遗留的老代码对项目产生影响。

  1. 安装
pnpm i lint-staged -D
  1. 配置 package.json
{
  "scripts": {
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

Commit 前修复

  1. 添加命令至 .husky/pre-commit 文件
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm lint-staged

Commitlint

使用 commitlint, 对 commit 的 msg 进行规范检查

安装和创建配置文件

pnpm add --save-dev @commitlint/cli @commitlint/config-conventional

echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

在 commitlint.config.js 写入

export default {
  // 继承config-conventional的规范
  extends: ['@commitlint/config-conventional'],
  // 校验规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style', // 代码风格调整,不影响代码逻辑的格式修改
        'refactor', // 代码重构,既不修复bug也不添加新功能的代码重构
        'perf', // 性能优化
        'test',
        'chore', // 杂项任务,不修改源代码或测试的其他维护任务
        'revert',
        'build', // 构建系统,影响构建系统或外部依赖的修改
      ],
    ],
    // 0 表示关闭该规则的校验
    // 'type-case': [0], // 是否校验 type 大小写
    // 'type-empty': [0], // 是否校验类型为空
    // 'scope-empty': [0], // 是否校验 scope 为空
    // 'scope-case': [0], // 是否校验 scope 大小写
    // 'subject-full-stop': [0, 'never'], // subject 结尾是否需要标点
    // 'subject-case': [0, 'never'], // 是否校验 subject 大小写
    // 'header-max-length': [0, 'always', 72], // header 最大长度
  },
}

配置 husky

npx husky add .husky/commit-msg

在 commit-msg 中添加

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

在 package.json 中配置scripts命令

# 在scrips中添加下面的代码
{
"scripts": {
    "commitlint": "commitlint --config commitlint.config.js -e -V"
  },
}

现在当我们提交 commit 信息的时候，就会对 msg 进行规范检查

Commitizen

使用 Commitizen by commitizen ，它提供了一种更现代的交互方式，可以方便选择你要 commit 的 msg

commit 的规范采用约定式提交

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

<类型>[可选 范围]: <描述>

[可选 正文]

[可选 脚注]

安装和配置

pnpm add -g commitizen

commitizen init cz-conventional-changelog --pnpm --save-dev --save-exact

在 package.json 配置

{
  "scripts": {
    "commit": "cz"
  }
}

运行

pnpm commit

Axios

Axios

安装

pnpm add axios

添加拦截器

在 ./utils/request.js 创建

import axios from 'axios'

// 创建axios实例
const request = axios.create()
// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  },
)

// 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error)
  },
)

export default request

Element Plus

一个 Vue 3 UI 框架 | Element Plus

安装

pnpm install element-plus

自动导入

pnpm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 的配置文件中

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: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

Tailwind CSS

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

安装

pnpm add tailwindcss @tailwindcss/vite

配置 vite.config.js

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

在 src/styles/tailwind.css 文件中导入

@import "tailwindcss";

后续的配置和自定义均在 tailwind.css 完成

在 main.js 引入 import './styles/tailwind.css'

文件结构

my-vue-app  
 ├── 📁 src  
 │   ├── 📁 apis          # 处理后端接口  
 │   ├── 📁 assets        # 静态文件  
 │   ├── 📁 components    # vue组件
 │        │── 📁 icons    # 存放组件要调用的svg资源
 │   ├── 📁 router        # vue路由结构  
 │   ├── 📁 stores        # 持久化存储(pinia)
 │   ├── 📁 styles        # css样式
 │   ├── 📁 utils         # 工具脚本,功能函数
 │   ├── 📁 views         # 路由对应vue组件