司馬宏達 ll 旅嚼放題

VuePress網站是基於Vue、Vue Router、webpack運作的網頁。

透過VuePress架設的網站，是使用簡單易懂的Markdown語法，非常適合想嘗試架設靜態網站的初學者。

VuePress基本需求

1. Code編輯器（我個人習慣使用 Visual Studio Code）

2. Node.js 8.6版本以上環境，安裝Node.js：Node.js｜安裝設定、建立網站伺服器

3. 安裝npm或是yarn ，認識npm：Node.js｜認識npm、使用npm專案管理

4. GitHub帳號

安裝VuePress

1.新建專案資料夾

建立方式一：自行建立資料夾

建立方式二：使用終端機（或命令提示字元）建立資料夾

mkdir vuepress-project && cd vuepress-project

語法說明：建立名為vuepress-project資料夾、終端機進入vuepress-project資料夾

建立完成使用終端機進入資料夾，或使用VSCode內建功能開啟終端機

2.專案初始化

在終端機中輸入

npm init 

或
 
yarn init

npm 和 yarn 都是Node.js的套件管理工具，Node.js會內建npm，而yarn要再手動進行安裝。

3.安裝VuePress

npm install -D vuepress
 
或

yarn add -D vuepress

4.在 package.json 檔案中添加 scripts

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

5.執行

npm run docs:dev

或

yarn docs:dev 

執行後，專案的伺服器就會開啟

但能開啟不代表有網頁有內容，接下來還要進行專案的架構配置設定！

下一篇：VuePress+GitHub架網站(二)-VuePress基本架構設定