vite vue3 规范化与Git Hooks详解

以下是“vite vue3 规范化与Git Hooks详解”的详细攻略。

概述

在前端开发中，如何进行规范化开发是一个十分重要的话题。同时，在团队协作中，代码的版本控制也是必不可少的一环。本文将介绍如何使用Vite和Vue3来实现前端规范化开发，并结合Git Hooks来实现代码的自动检测和提交。

Vite+Vue3规范化开发

创建项目

首先需要使用Vue CLI来创建一个Vue3项目，命令如下：

vue create my-vue-project

选择默认选项即可。创建完成后进入项目目录，并安装Vite：

cd my-vue-project
npm install vite --save-dev

新建页面

在src目录下新建一个views目录，用来存放页面组件。在views目录下新建一个页面组件文件，命名为page1.vue，内容如下：

<template>
  <div class="page1">
    <h1>Page 1</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to Page 1!'
    }
  }
}
</script>

<style>
.page1 {
  background-color: #f7f7f7;
  padding: 20px;
}
</style>

新建路由

在src目录下新建一个router目录，用来存放路由文件。在router目录下新建一个文件，命名为index.js，内容如下：

import { createRouter, createWebHistory } from 'vue-router'
import Page1 from '@/views/page1.vue'

const routes = [
  {
    path: '/',
    name: 'Page1',
    component: Page1
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

配置Vite

在项目根目录新建一个vite.config.js文件，配置Vite如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  }
})

启动项目

在package.json中添加以下scripts：

"scripts": {
  "dev": "vite"
}

执行以下命令启动项目：

npm run dev

在浏览器中访问http://localhost:3000/即可看到页面1。

规范化开发

规范化开发可以包括以下内容：

• 代码风格约定：比如缩进、命名、注释等
• 代码结构约定：比如文件命名、目录结构等
• 组件化开发：将页面拆分成多个组件，提高代码复用性和可维护性
• 公共代码提取：将组件中公共的代码提取出来，形成单独的类库或组件，方便多个项目复用

详细的规范化开发内容超出本文范围，感兴趣的读者可以自行查阅相关资料。

Git Hooks自动检测和提交

安装husky和lint-staged

Husky是一个git hooks管理工具，可以用来自动运行代码检查、测试、提交等命令。lint-staged是一个可以在Git暂存区中处理指定文件的工具。

执行以下命令安装husky和lint-staged：

npm install husky lint-staged --save-dev

配置husky和lint-staged

在package.json中添加以下配置：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,vue}": ["npm run lint", "git add"]
}

上述配置的含义是，在每次commit前，自动运行npm run lint命令对.js和.vue文件进行检查，如果检查通过，自动将暂存区中的文件提交到仓库。

检查规范

在上述配置中，npm run lint命令是用来检查规范的。可以使用eslint、stylelint、prettier等工具来检查规范。

示例1

下面的示例中，我们可以使用eslint来检查.js和.vue文件的规范。

安装eslint

执行以下命令安装eslint：

npm install eslint --save-dev

初始化eslint配置

执行以下命令初始化eslint配置：

npx eslint --init

按照提示进行配置即可。如果不需要对特定类型的文件进行检查，可以在.eslintrc.js的配置中进行统一排除。

配置npm script

在package.json的scripts中添加以下命令：

"scripts": {
  "lint": "eslint . --ext .js,.vue"
},

执行以下命令运行检查：

npm run lint

示例2

下面的示例中，我们可以使用stylelint来检查.vue文件中的样式规范。

安装stylelint

执行以下命令安装stylelint：

npm install stylelint stylelint-config-standard --save-dev

初始化stylelint配置

在根目录下新建.stylelintrc.json文件，并添加以下配置：

{
  "extends": "stylelint-config-standard"
}

配置npm script

在package.json的scripts中添加以下命令：

"scripts": {
  "lint": "eslint . --ext .js,.vue && stylelint \"src/**/*.vue\""
},

执行以下命令运行检查：

npm run lint

示例3

下面来演示一个自动生成changelog并提交的功能。在Git commit时，可以根据提交信息自动生成Changelog文件，以及自动将Changelog提交到仓库。

安装conventional-changelog-cli

执行以下命令安装conventional-changelog-cli：

npm install conventional-changelog-cli --save-dev

配置npm script

在package.json的scripts中添加以下命令：

"scripts": {
  "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
},

配置husky和lint-staged

在package.json中添加以下配置：

"husky": {
  "hooks": {
    "pre-commit": "npm run changelog && git add CHANGELOG.md && lint-staged"
  }
},
"lint-staged": {
  "*.{js,vue}": ["npm run lint", "git add"]
}

每次commit前，除了运行npm run lint检查代码规范外，还会自动生成Changelog文件，并将其加入暂存区。

以上就是Vite、Vue3及Git Hooks的详细攻略，希望对您有所帮助。