VuePress使用

wulala9發表於2024-06-20

記一篇:安裝Vuepress過程也遇到的問題,於是想寫篇文章總結一下~ ~

一、介紹

VuePress 是一個以 Markdown 為中心的靜態網站生成器。你可以使用 Markdown在新視窗開啟 來書寫內容(如文件、部落格等),然後 VuePress 會幫助你生成一個靜態網站來展示它們。

官網連結:https://vuepress.vuejs.org/zh/guide/introduction.html

二、安裝

依賴環境:Node.js v18.16.0+

1.node/npm安裝

因為原node.js v16.0.1需解除安裝後重新安裝,在Node.js官網下載msi檔案:下載地址: Node.js — Download,下載後點選msi安裝,

安裝後cmd 執行node -v npm-v 檢視版本

2.pnpm安裝(非必要)

為什麼使用pnpm? pnpm 本質上就是一個包管理器,這一點跟 npm/yarn 沒有區別 它的優勢:包安裝速度極快;磁碟空間利用非常高效;

可以使用npm i -g pnpm安裝

想了解pnpm更多的內容可以透過此篇進行了解:連結

3.VuePress安裝

(1)#安裝 vuepress:npm install -g vuepress

(2)#安裝打包工具和主題:npm install -g @vuepress/bundler-vite@next @vuepress/theme-default@next

到此相關依賴已安裝完成

三 、除錯/執行

建立專案模板:pnpm create vuepress-theme-hope my-docs 或 npm init vuepress-theme-hope@latest my-docs

my-docs可替換自己想生成的檔案

啟動後檢視發現報錯:埠被佔用

可透過對應檔案package.json 修改埠號 cd 進入生成檔案的路徑

以上就完成相關打包除錯流程了,訪問 http://localhost:8089/

以上demo來源是giee:有興趣可透過 連結 訪問~ ~



相關文章