網(wǎng)站建設(shè)和錢外貿(mào)網(wǎng)站免費推廣b2b
文章目錄
- 安裝前的準備工作
- 項目安裝
- 創(chuàng)建文件
- 初始化文件
- 安裝依賴
- 遇到了 missing peer deps 警告?
- 命令行設(shè)置向?qū)?/li>
- 完成
安裝前的準備工作
- Node.js 18 及以上版本。
- 通過命令行界面 (CLI) 訪問 VitePress 的終端。
- 支持 Markdown 語法的編輯器。
- 推薦 VSCode 及其官方 Vue 擴展。
項目安裝
VitePress 可以單獨使用,也可以安裝到現(xiàn)有項目中。在這兩種情況下,都可以使用以下方式安裝它。
創(chuàng)建文件
可以手動新建一個文件,也可以使用指令。
指令:
# mkdir 創(chuàng)建文件夾指令; && 表示當前命令執(zhí)行成功后會執(zhí)行下一條指令。
mkdir vitepress-starter && cd vitepress-starter
初始化文件
(看習慣,如果有該習慣就初始化,沒有可跳過)
官網(wǎng)默認使用了 yarn 作為依賴管理工具
# 用yarn初始化
yarn init# 用pnpm初始化
pnpm init# 用npm初始化
npm init
安裝依賴
安裝項目所需的依賴 vitepress
# 用yarn
yarn add -D vitepress# 用pnpm
pnpm add -D vitepress# 用npm
npm add -D vitepress
如果下載失敗,可以使用以下方法:
npm add --dev vitepress
遇到了 missing peer deps 警告?
如果使用 PNPM,會注意到對 @docsearch/js 的 missing peer deps 警告。這不會影響 VitePress 運行。如果希望禁止顯示此警告,請將以下內(nèi)容添加到 package.json:
"pnpm": {"peerDependencyRules": {"ignoreMissing": ["@algolia/client-search","search-insights"]}
}
命令行設(shè)置向?qū)?/h5>
在vitepress官方文檔中提到,vitepress附帶了一個命令行向?qū)?#xff0c;來幫助構(gòu)建一個基本的項目。通過運行以下命令啟動向?qū)?#xff1a;
# 用yarn
yarn vitepress init# 用pnpm
pnpm vitepress init# 用npm
npx vitepress init
將需要回答幾個簡單的問題:
┌ Welcome to VitePress!
│
◇ Where should VitePress initialize the config?
│ ./docs
│
◇ Site title:
│ My Awesome Project
│
◇ Site description:
│ A VitePress Site
│
◆ Theme:
│ ● Default Theme (Out of the box, good-looking docs)
│ ○ Default Theme + Customization
│ ○ Custom Theme
└
此時文件的目錄結(jié)構(gòu)是這樣的,如下樹狀代碼所示:
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ ├─ api-examples.md
│ ├─ markdown-examples.md
│ └─ index.md 入口文件
└─ package.json
完成
基本完成了vitepress項目的初始化。運行 pnpm run docs:dev
來打開項目。效果如下:
看到如下界面即表示運行成功
您好,我是肥晨。
歡迎關(guān)注我獲取前端學(xué)習資源,日常分享技術(shù)變革,生存法則;行業(yè)內(nèi)幕,洞察先機。