Vuepress 2 專欄目錄
1. 入門階段
- Vuepress 2從0-1保姆級入門教程——環境配置篇
- Vuepress 2從0-1保姆級入門教程——安裝流程篇
- Vuepress 2從0-1保姆級入門教程——文檔配置篇
- Vuepress 2從0-1保姆級入門教程——范例與部署
2.進階階段
- Vuepress 2從0-1保姆級進階教程——全文搜索篇
- Vuepress 2從0-1保姆級進階教程——美化與模版
- 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
