VuePress介紹

從本文開始，動手搭建自己的博客！希望讀者能跟著一起動手，這樣才能真正掌握。

VuePress 是由 Vue 作者帶領團隊開發的，非常火，使用的人很多；Vue 框架官網也是用了 VuePress 搭建的。即使是在移動端，閱讀體驗也很好。

根據 VuePress 官網的描述，VuePress 是 Vue 驅動的靜態網站生成器。簡單來說，就是將 Markdown 文件自動轉換 HTML，簡潔容易使用，性能高，我們只需專注于 Markdown 內容。

一般來說，學習什么技術，或者使用什么工具，官網文檔是最好的……

但我仔細看了下，官網的文檔更相當于一個手冊，大而全；而我需要的是一個教程，逐步完善功能，而不是一上來就列出所有的功能，令人眼花繚亂，不知道從何下手。為此，我自己整理了不少關于 VuePress 的筆記，看了不少關于 VuePress 入門的博客，才略有所得，寫出了本教程。

本文使用的是 VuePress1.x，雖然 VuePress2.x （也叫 VuePress@next）已經出來一段時間了（2021 年左右），但是 VuePress1.x 的生態很完善，不少主題和插件都僅兼容 1.x，所以本文也是使用 1.x。

題外話：就好比 Java 中，Java8 是用的最廣泛的，生態也非常完善，最新版的 Java 較少人使用。

讀者如果想使用最新版本的 VuePress，也可參考官方的文檔，在官網右上角可以選擇。博主也簡單看了下 v2.x 的文檔，在使用方面基本上和 v1.x 差不多，想要遷移也是很方便的。

除此之外還有 vitepress，基于 vite 建立的，也是因為生態不完善，所以這里不過多介紹。

我們首先在本地搭建博客，為此我們需要：

我們來寫第一個博客吧！首先，創建一個文件夾，例如 vuepress-learn（文件夾名最好不要帶中文和空格），也可以在 cmd 里使用如下命令

# Windows下
md vuepress-learn 
cd vuepress-learn# Linux 和 mac 下
mkdir vuepress-learn && cd vuepress-learn

使用自己喜歡的包管理器初始化：

npm init -y
或
yarn init

安裝 VuePress 依賴：

npm install -D vuepress

開始寫第一篇博客：

mkdir docs && echo '# Hello VuePress' > docs/README.md

修改 package.json 文件，添加一些啟動命令：

{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}

其中，docs:dev? 命令用于在本地運行本博客；而 docs:build? 用于編譯打包博客，用于部署到服務器上。

當前文件夾目錄結果如下（忽略 node_modules 文件夾）：

vuepress-learn
├── docs
│   └── README.md
├── package-lock.json
└── package.json

啟動博客：在項目根目錄運行如下命令：

npm run docs:dev

運行后，正常情況下就能編譯成功，并且在最后會有提示：

success [22:46:24] Build 185e1f finished in 167 ms! ( http://localhost:8080/ )

我們在瀏覽器打開這個網址 http://localhost:8080?，可以看到如下內容：

至此，我們的第一篇博客就完成了！

為了后續教程需要，我們將本項目用 Git 管理

git init

添加 .gitignore 文件，忽略 node_modules 文件夾：

node_modules

為了寫本系列的博客，博主特地新建了一個項目用于演示，相關代碼已放到 Gitee 和 GitHub 上。

并且，不同功能創建了不同分支，想要獲取本篇文章演示的源碼只需切換分支即可！

例如，你想運行本篇文章所創建的博客，可以這樣做：

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/38846.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/38846.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/38846.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！