一步步搭建一个vite2+vue3+ts的基础项目（二）

小小小怪兽
996 阅读4分钟

在上一篇文章中，已经一步步完成了vite2+vue3+ts的项目搭建，文章地址：一步步搭建一个vite2+vue3+ts的基础项目，在此文章里，可以了解到关于vite2、ts、Eslint等相关配置，希望感兴趣的同学可以去了解一下。

引言

在之前的文章里我们已经引入了项目的核心框架，并对代码风格进行了限制。本文的主要内容通过限制commit提高项目管理的能力，并引入一些目前比较流行的工具，来开拓我们的视野，为我们提供更多的方向，提高开发效率。

基础环境
yarn1.22.19
node16.15.1
cmder终端工具
vscodevolar(重要插件)
chrome浏览器

完整代码：GitHub

正式开始

之前，我们使用的是npm来管理我们的依赖，本文我们替换为了yarn，它具有更好的缓存机制以及版本锁定的能力。替换方式也很容易

npm install -g yarn
rm -rf node_modules
yarn

即可。

一.限制并美化git commit

之前我们限制了代码的基本风格，但每个人的风格都是各不相同的，所以为了项目更好的可维护性，所以我们需要将这些东西推行下去，同时自动化的完成，减少人力工作。我们选择在代码提交到git远程仓库之前，做好这些工作。

  • 校验代码风格，并格式化
  • 统一commit风格

AngularJS 在 github上 的提交记录被业内许多人认可，逐渐被大家引用。所以我们这里也是用AG的commit规范。

安装相关依赖，在之前我们就已经安装过husky，如果你没有安装过，这里还需要安装husky和lint-staged

yarn add -D @commitlint/cli commitlint-config-cz commitlint-config-git-commit-emoji cz-customizable

这里主要是自定义commit规范的脚手架。

新建.commitlintrc.js文件

module.exports = {
  extends: ['git-commit-emoji', 'cz']
};

新建.cz-config.js文件

它可以对我们commit的规范，进行一些具体的配置，大家可以根据自己的需求再去修改。

module.exports = {
  types: [
    {
      value: ':sparkles: feat',
      name: '✨ feat:     新功能'
    },
    {
      value: ':bug: fix',
      name: '🐛 fix:      修复bug'
    },
    {
      value: ':tada: init',
      name: '🎉 init:     初始化'
    },
    {
      value: ':pencil2: docs',
      name: '✏️ docs:    文档变更'
    },
    {
      value: ':lipstick: style',
      name: '💄 style:    代码格式化'
    },
    {
      value: ':recycle: refactor',
      name: '♻️ refactor: 代码重构'
    },
    {
      value: ':zap: perf',
      name: '⚡️ perf:     性能优化'
    },
    {
      value: ':white_check_mark: test',
      name: '✅ test:     测试'
    },
    {
      value: ':rewind: revert',
      name: '⏪️ revert:   回退'
    },
    {
      value: ':package: build',
      name: '📦️ build:    打包'
    },
    {
      value: ':rocket: chore',
      name: '🚀 chore:    构建或工具变动'
    },
    {
      value: ':construction_worker: ci',
      name: '👷 ci:       工作流相关'
    }
  ],
  messages: {
    type: '请选择提交类型(必填)',
    customScope: '请输入文件修改范围(可选)',
    subject: '请简要描述提交(必填)',
    body: '请输入详细描述(可选)',
    breaking: '列出任何BREAKING CHANGES(可选)',
    footer: '请输入要关闭的issue(可选)',
    confirmCommit: '确定提交此说明吗？'
  },
  allowCustomScopes: true,
  allowBreakingChanges: [':sparkles: feat', ':bug: fix'],
  subjectLimit: 72
};

husky可以帮助我们在项目中很容易的添加git hooks

在.husky文件夹中新建commit-msg文件

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

yarn commitlint --edit "$1"

在.husky文件夹中新建pre-commit文件

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

yarn lint-staged --allow-empty "$1"

在package.json中新增以下代码，来执行我们对于代码风格的校验及格式化

"lint-staged": {
    "src/**/*.{ts,vue}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.vue": [
      "prettier --write",
      "stylelint --fix  --custom-syntax postcss-html"
    ],
    "*.{css, scss, html}": [
      "stylelint --fix --custom-syntax postcss-html",
      "prettier --write"
    ]
  },

通过上述的步骤，就完成了commit的基本配置，然后

在package.json中新增以下代码，之后我们在提交代码时，执行这个新命令即可。

"scripts": {
    "commit": "cz-customizable"
},

实例：

image.png

image.png

效果如图。

二.使用TailWindcss

TailWindCss也是契合当前前端开发模式的一个css库。它主要的概念就是通过原子化的class来组合样式，很契合当前组件化开发的前端开发模式。将之前的分离html、css、js模式，现在js+html组合成了jsx，而css一直缺游离于组件之外，现在通过这种原子化的class，将样式也融入到jsx中去，不再暴露出来，将页面由一个个组件去组合。

TailWind

安装TailWindcss

yarn install -D tailwindcss
yarn tailwindcss init

在tailwind.config.ts中新增

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],

  theme: {
    extend: {}
  },

  plugins: []
};

修改vite.config.ts

css: {
    //   postcss: {}, // 如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源,所以使用tailwindcss时要去掉该配置
  },

推荐使用vscode插件：Tailwind CSS IntelliSense，可以帮助我们获得更好的提示。

示例：

<template>
  <button
    class="px-4 py-2 font-semibold text-sm bg-cyan-500 text-white rounded-full shadow-sm"
  >
    button
  </button>
</template>

一开始使用时，确实记不清它这么多的class，所以推荐使用vscode插件：Tailwind CSS IntelliSense，可以帮助我们获得更好的提示。

三.使用Vueuse完成一个黑暗模式

之前就推荐过这个开源项目，vue3中一个大特性就是支持了hook，这个项目封装了很多常用的hook，让我们直接使用，感兴趣的同学也可以去了解它的源码，难度不大，值得阅读。这里也是通过它配合tailwindcss几行代码来实现一个现在很流行的黑暗模式。

安装Vueuse

yarn add @vueuse/core

在tailwind.config.ts中新增

module.exports = {
  darkMode: 'class',
};

具体代码：

<template>
  <button class="text-sky-500" @click="toggleDark()">
    <Icon v-if="isDark" name="moon" />
    <Icon v-else name="sun" />
  </button>
</template>

<script setup lang="ts">
import Icon from 'components/Icon.vue'; // 我自己封装的icon组件，具体在项目仓库中查看
import { useDark, useToggle } from '@vueuse/core';

const isDark = useDark({
  selector: 'html',
  attribute: 'class',
  valueDark: 'dark',
  valueLight: ''
});

const toggleDark = useToggle(isDark);
</script>

尾言

希望通过这些好的开源项目，可以帮助大家更快、更好的完成项目。大家也可以持续关注这个仓库，完整的项目代码，也在仓库中，欢迎star！👍

avatar
文章
阅读
粉丝