Vuepress 2从0-1保姆级进阶教程——标准化流程

2024-06-08 07:04

本文主要是介绍Vuepress 2从0-1保姆级进阶教程——标准化流程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述

Vuepress 2 专栏目录

1. 入门阶段

  1. Vuepress 2从0-1保姆级入门教程——环境配置篇
  2. Vuepress 2从0-1保姆级入门教程——安装流程篇
  3. Vuepress 2从0-1保姆级入门教程——文档配置篇
  4. Vuepress 2从0-1保姆级入门教程——范例与部署

2.进阶阶段

  1. Vuepress 2从0-1保姆级进阶教程——全文搜索篇
  2. Vuepress 2从0-1保姆级进阶教程——美化与模版
  3. Vuepress 2从0-1保姆级进阶教程——标准化流程

一、样式

如果你专注写作,请跳过样式

(一)Autoprefixer(推荐)

css3有些功能写法没统一下来, 各个浏览器写法不同,比如写个动画延时,考虑到兼容问题,要这样写:

.test{-moz-animation-delay:.3s;-webkit-animation-delay:.3s;-o-animation-delay: .3s;animation-delay: .3s;
}

Autoprefixer是一个用于添加浏览器前缀的工具,在代码打包后自动运行

1.安装

pnpm install autoprefixer -D

在这里插入图片描述

2.配置

import autoprefixer from 'autoprefixer'export default defineUserConfig({plugins: [autoprefixer({overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11'],})
],bundler: viteBundler(),
})

在这里插入图片描述

pnpm docs:build后,在dist/assets查看样式文件,可看到添加的浏览器前缀

在这里插入图片描述

(二)TailwindCSS(可选)

TailwindCSS依赖Autoprefixer,请确保安装过Autoprefixer

pnpm install -D tailwindcss postcss
npx tailwindcss init -p

1.初始化配置

安装后会在项目根目录生成tailwind.config.js,postcss.config.js配置文件
编辑tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html","./docs/**/*.{js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}

2.样式调用

在.vuepress/styles/index.scss调用

@tailwind base;
@tailwind components;
@tailwind utilities;

二、Commit

是不是经常发现自己推送的commit不知道做了啥,Changelog不想写?随便一写,后面版本更迭,摸不到头脑,用以下工具更好的帮你

(一)cz-git

在这里插入图片描述

1.安装

pnpm install -D commitizen cz-git

2.修改package.json

添加以下内容指定适配器,并单独调用git-cz取代git commit

  "scripts": {"docs:build": "vuepress build docs","docs:clean-dev": "vuepress dev docs --clean-cache","docs:dev": "vuepress dev docs","docs:update-package": "pnpm dlx vp-update","commit":"git add . && git-cz"},"config": {"commitizen": {"path": "node_modules/cz-git"}},

3.配置模版

根目录新建commitlint.config.cjs(esm规范项目)

// commitlint.config.cjs
/** @type {import('cz-git').UserConfig} */
module.exports = {rules: {// @see: https://commitlint.js.org/#/reference-rules},prompt: {alias: { fd: 'docs: fix typos' },messages: {type: '选择你要提交的类型 :',scope: '选择一个提交范围(可选):',customScope: '请输入自定义的提交范围 :',subject: '填写简短精炼的变更描述 :\n',body: '填写更加详细的变更描述(可选)。使用 "|" 换行 :\n',breaking: '列举非兼容性重大的变更(可选)。使用 "|" 换行 :\n',footerPrefixesSelect: '选择关联issue前缀(可选):',customFooterPrefix: '输入自定义issue前缀 :',footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',confirmCommit: '是否提交或修改commit ?'},types: [{ value: 'feat', name: 'feat:     新增功能 | A new feature' },{ value: 'fix', name: 'fix:      修复缺陷 | A bug fix' },{ value: 'docs', name: 'docs:     文档更新 | Documentation only changes' },{ value: 'style', name: 'style:    代码格式 | Changes that do not affect the meaning of the code' },{ value: 'refactor', name: 'refactor: 代码重构 | A code change that neither fixes a bug nor adds a feature' },{ value: 'perf', name: 'perf:     性能提升 | A code change that improves performance' },{ value: 'test', name: 'test:     测试相关 | Adding missing tests or correcting existing tests' },{ value: 'build', name: 'build:    构建相关 | Changes that affect the build system or external dependencies' },{ value: 'ci', name: 'ci:       持续集成 | Changes to our CI configuration files and scripts' },{ value: 'revert', name: 'revert:   回退代码 | Revert to a commit' },{ value: 'chore', name: 'chore:    其他修改 | Other changes that do not modify src or test files' },],useEmoji: false,emojiAlign: 'center',useAI: false,aiNumber: 1,themeColorCode: '',scopes: [],allowCustomScopes: true,allowEmptyScopes: true,customScopesAlign: 'bottom',customScopesAlias: 'custom',emptyScopesAlias: 'empty',upperCaseSubject: false,markBreakingChangeMode: false,allowBreakingChanges: ['feat', 'fix'],breaklineNumber: 100,breaklineChar: '|',skipQuestions: [],issuePrefixes: [// 如果使用 gitee 作为开发管理{ value: 'link', name: 'link:     链接 ISSUES 进行中' },{ value: 'closed', name: 'closed:   标记 ISSUES 已完成' }],customIssuePrefixAlign: 'top',emptyIssuePrefixAlias: 'skip',customIssuePrefixAlias: 'custom',allowCustomIssuePrefix: true,allowEmptyIssuePrefix: true,confirmColorize: true,scopeOverrides: undefined,defaultBody: '',defaultIssues: '',defaultScope: '',defaultSubject: ''}
}

4.项目提交

pnpm commit

在这里插入图片描述

在这里插入图片描述

(二)conventional-changelog

发布新版本时,自动更新 CHANGELOG.md 文件,减少手动工作

1.安装

pnpm install -g conventional-changelog-cli

2.修改快捷指令

修改package.json,

  "scripts": {"docs:build": "vuepress build docs","docs:clean-dev": "vuepress dev docs --clean-cache","docs:dev": "vuepress dev docs","docs:update-package": "pnpm dlx vp-update","commit":"git add . && git-cz","changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 2"},

3.使用

pnpm changelog

在这里插入图片描述

这篇关于Vuepress 2从0-1保姆级进阶教程——标准化流程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1041476

相关文章

Spring Security中用户名和密码的验证完整流程

《SpringSecurity中用户名和密码的验证完整流程》本文给大家介绍SpringSecurity中用户名和密码的验证完整流程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定... 首先创建了一个UsernamePasswordAuthenticationTChina编程oken对象,这是S

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器(Decorator)是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制(JDK/CGLIB)、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

SpringBoot连接Redis集群教程

《SpringBoot连接Redis集群教程》:本文主要介绍SpringBoot连接Redis集群教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 依赖2. 修改配置文件3. 创建RedisClusterConfig4. 测试总结1. 依赖 <de

Android ViewBinding使用流程

《AndroidViewBinding使用流程》AndroidViewBinding是Jetpack组件,替代findViewById,提供类型安全、空安全和编译时检查,代码简洁且性能优化,相比Da... 目录一、核心概念二、ViewBinding优点三、使用流程1. 启用 ViewBinding (模块级

SpringBoot整合Flowable实现工作流的详细流程

《SpringBoot整合Flowable实现工作流的详细流程》Flowable是一个使用Java编写的轻量级业务流程引擎,Flowable流程引擎可用于部署BPMN2.0流程定义,创建这些流程定义的... 目录1、流程引擎介绍2、创建项目3、画流程图4、开发接口4.1 Java 类梳理4.2 查看流程图4

Nexus安装和启动的实现教程

《Nexus安装和启动的实现教程》:本文主要介绍Nexus安装和启动的实现教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Nexus下载二、Nexus安装和启动三、关闭Nexus总结一、Nexus下载官方下载链接:DownloadWindows系统根

java Long 与long之间的转换流程

《javaLong与long之间的转换流程》Long类提供了一些方法,用于在long和其他数据类型(如String)之间进行转换,本文将详细介绍如何在Java中实现Long和long之间的转换,感... 目录概述流程步骤1:将long转换为Long对象步骤2:将Longhttp://www.cppcns.c

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据