iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 5
1
Modern Web

透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 系列 第 5

開始一個 VuePress 專案吧!

開始一個 VuePress 專案吧!

凡事都從最簡單基礎的架構開始體驗吧,第一步就是先確認電腦上有沒有相應的開發環境,因為 VuePress 是使用 Webpack 來進行模組處理的,而且目前前端各項工具基本上都離不開 Node.js 的執行環境,所以要先進行安裝,如果已經安裝的也要確認版本喔。

VuePress 需要 Node.js >= 8.6

如果沒有安裝過 Node.js 的話,可能你目前不是專精於前端領域的開發者,先到 Node.js 官方網站下載 LTS 版本安裝即可,本文撰寫時 LTS 版本為 12.18.3

而 Node.js 中有內建一個叫做 npm 的套件管理工具,但是因為 VuePress 官方建議使用 Yarn 進行套件管理,所以還需要打開終端機視窗輸入下面的指令安裝 Yarn:

npm install -g yarn

該裝的環境安裝完,就可以進行下一步囉!


建立專案資料夾

不管你是喜歡下指令,還是喜歡用滑鼠點,都沒有關係,反正有辦法建立出一個專案資料夾就可以了,但是資料夾建立好之後,還是得靠指令了喔!

一樣打開終端機,先進入剛剛建立好的資料夾輸入指令 yarn init

專案初始化的設定可以不用管,先都用預設值一路 Enter 就好了
https://i.imgur.com/1lK2k88.png

完成後資料夾內會多一個 package.json 的檔案,這個檔案會記錄專案內用到的套件與指令,接著我們就來安裝第一個套件 VuePress 吧!

yarn add -D vuepress

接著要在剛剛提過的 package.json 中新增一段腳本,透過腳本的運行環境才能順利執行 VuePress 的各項指令喔:

"scripts": {
    "dev": "vuepress dev ./",
    "build": "vuepress build ./"
},

貼上之後的 package.json 大致上會長這樣:
https://i.imgur.com/ymG0qvn.png


新增第一份文件啦

直接在專案根目錄中新增一個 README.md 檔案,檔案裡面可以使用 Markdown 的語法先隨便輸入一些內容
https://i.imgur.com/FEL64kC.png

接著就可以到終端機視窗,輸入指令 yarn dev 來運行開發模式囉!

輸入完等子彈飛一會,沒有意外的話就會看到像這樣的畫面:
https://i.imgur.com/VQM93u8.png

這時候我們就可以打開瀏覽器連線到 http://localhost:8080/ 來確認一下運行結果啦!

可以看到剛剛我們在 README.md 中輸入的內容已經呈現在網頁上了,而且如果有安裝
Vue.js devtools 的話,還可以看到組件與狀態喔。


新的頁面分類

當然網站也不可能只有一個頁面對吧?

我們就來試試看新增一個資料架 news,裡面新增兩個檔案:

  • README.md
  • test.md

儲存完之後我們再到網頁上面看看,網址列直接輸入 http://localhost:8080/news/ 就會顯示我們剛剛在 news 資料夾中 README.md 的內容

這個是因為 VuePress 預設將資料夾內的 README.md 視為根目錄文件喔。

所以如果想到看到 test.md 的內容,就只能輸入完整的路徑 http://localhost:8080/news/test.html 囉。

而這個 .html 則是因為 VuePress 將 .md 編譯為 HTML 文件的關係。

其實 VuePress 預設的主題內就有搜尋功能,也是可以趁機玩玩看啦!


更深入的專案結構

今天就透過簡單的展示來帶你啟動第一個 VuePress 專案,但是真正想要活用 VuePress 的話,這樣可就太單調啦。

明天就來針對專案結構做一個比較進階的解說吧。


上一篇
偏冷門卻有趣的 VuePress
下一篇
從了解 VuePress 的專案結構開始吧
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30

尚未有邦友留言

立即登入留言