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基本架構設定


arrow
arrow
    文章標籤
    VuePres 自己架網站
    全站熱搜
    創作者介紹
    創作者 司馬宏達 的頭像
    司馬宏達

    司馬宏達 ll 旅嚼放題

    司馬宏達 發表在 痞客邦 留言(0) 人氣()