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基本架構設定
留言列表