VitePress安裝部署
VitePress安裝步驟
安裝 Node環境
官網下載：https://nodejs.org/zh-cn
傻瓜式安裝到完成
npm環境
安裝完Node環境之后，可以直接運行下面的命令安裝npm
npm install -g pnpm
關于pnpm源：
有時候需要國內源，不全的時候又要切換到默認源，比較麻煩，以下提供幾個源：
設置鏡像源，可以使用淘寶源
pnpm config set registry https://registry.npm.taobao.org/切回官方鏡像
npm config set registry https://registry.npmmirror.com/
具體的教程可以參考：https://blog.csdn.net/qq_43684588/article/details/134554654
初始化項目
新建一個空的目錄：D:\project2024\VitePress
$ pnpm init # 初始化目錄Wrote to D:\project2024\VitePress\package.json{"name": "VitePress","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}安裝VitePress
$ pnpm add -D vitepress # 安裝VitePressProgress: resolved 1, reused 0, downloaded 0, added 0
Progress: resolved 17, reused 0, downloaded 4, added 0
Progress: resolved 58, reused 0, downloaded 14, added 0
Progress: resolved 60, reused 0, downloaded 31, added 0
Progress: resolved 75, reused 0, downloaded 55, added 0
Packages: +85
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 123, reused 0, downloaded 82, added 0
Progress: resolved 123, reused 0, downloaded 84, added 52
Progress: resolved 123, reused 0, downloaded 84, added 68
Progress: resolved 123, reused 0, downloaded 84, added 69
Progress: resolved 123, reused 0, downloaded 85, added 85, done
.../esbuild@0.21.5/node_modules/esbuild postinstall$ node install.js
.../node_modules/vue-demi postinstall$ node -e "try{require('./scripts/postinstall.js')}catch(e){}"
.../node_modules/vue-demi postinstall: Done
.../esbuild@0.21.5/node_modules/esbuild postinstall: DonedevDependencies:
+ vitepress 1.2.3Done in 13.5s初始化VitePress
需要注意的是：我習慣用git的命令窗口，上面的步驟都是在git的命令窗口做的，但是到了這一步的時候git命令窗口就會出現問題。所以我切換成了cmd命令窗口
npx vitepress init # 初始化VitePressT Welcome to VitePress!
|
o Where should VitePress initialize the config?
| ./docs
|
o Site title:
| My Awesome Project
|
o Site description:
| A VitePress Site
|
o Theme:
| Default Theme + Customization
|
o Use TypeScript for config and theme files?
| Yes
|
o Add VitePress npm scripts to package.json?
| Yes
|
— Done! Now run npm run docs:dev and start writing.Tips:
- Since you've chosen to customize the theme, you should also explicitly install vue as a dev dependency.
項目目錄結構
在 docs 文件夾中創建 public 文件夾，用于存放項目圖片
.
├── docs
│ ├── .vitepress
│ │ └── config.mts
│ ├── api-examples.md
│ ├── index.md
│ ├── markdown-examples.md
├── package.json
└── pnpm-lock.yaml
運行項目
pnpm run docs:devvitepress v1.2.3? Local: http://localhost:5173/? Network: use --host to expose? press h to show help這樣就部署完成了
)