VuePress部落格網站搭建
vuePress
vuePress 由兩部分組成：一個以 Vue 驅動的主題系統的簡約靜態網站生成工具，和一個為編寫技術文件而優化的預設主題。它是為了支援 Vue 子專案的文件需求而建立的。
由 VuePress 生成的每個頁面，都具有相應的預渲染靜態html，它們能提供出色的載入效能，並且對seo友好。然而，頁面載入之後，Vue 就會將這些靜態內容，接管為完整的單頁面應用程式(SPA)。當用戶在瀏覽站點時，可以按需載入其他頁面。VuePress中文網
環境搭建
安裝
Node.js版本需要>=8才可以。
npm install -g vuepress 或者在已有專案中安裝 npm install vuepress -D
安裝完成檢測是否安裝成功
vuepress -v
//vuepress v1.0.3其他資訊：
vuepress v1.0.3
Usage:
$ vuepress <command> [options]
Commands:
dev [targetDir] start development server
build [targetDir] build dir as static site
eject [targetDir] copy the default theme into .vuepress/theme for customization.
info Shows debugging information about the local environment
For more info, run any command with the `--help` flag:
$ vuepress dev --help
$ vuepress build --help
$ vuepress eject --help
$ vuepress info --help
Options:
-v, --version Display version number
-h, --help Display this message 建立專案
mkdir VuePress
cd VuePress初始化專案
通過npm init快速建立專案的pageage.json檔案
npminit-y{
"name": "VuePress",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
} 新建docs資料夾
docs資料夾作為專案文件根目錄，主要放置Markdown型別的文章和.vuepress資料夾。
mkdirdocs設定package.json
在script中新增dev啟動和build打包指令碼命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vuepress dev docs",
"build": "vuepress build docs"
},建立README.md
在docs裡面建立README.md
cd docs
echo "## Hello VuePress" > README.md建立.vuepress目錄
npmrun build可直接打包構建README.md檔案 並生成.vuepress
.vuepress目錄這是放置所有 VuePress 特有(VuePress-specific) 檔案的地方。
建立config.js
不做任何配置的話，頁面會顯得過於簡單，使用者也無法方便地瀏覽網站；
配置 VuePress 站點的基本檔案是.vuepress/config.js，其中匯出一個JavaScript物件：
touchconfig.js目錄結構
├── docs # 文件目錄
│ ├── .vuepress //存放所有資源和打包結果
│ │ ├── dist //打包結果
│ │ ├── public //公共資原始檔
│ │ ├── ...
│ │ └── config.js //配置檔案
│ ├── demo //分類文件儲存
│ │ ├── demo1.md
│ │ ├── ...
│ │ └── demon.md
│ └── README.md
└── package.json//專案啟動配置資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
基本配置
module.exports = {
title: '文件管理',
description: '呵呵部落格',
head: [
['link', { rel: 'icon', href: '/logo.ico' }]
]
}title
- Type:string
- Default:undefined
網站的標題。這將是所有頁面標題的字首，並顯示在預設主題的導航欄中。
description
- Type:string
- Default:undefined
網站描述。這將在頁面html中表現為一個<meta>標籤。
head
- Type:Array
- Default:[]
被注入頁面 HTML<head>額外的標籤。每個標籤可以用[tagName, { attrName: attrValue }, innerHTML?]的形式指定。例如，要新增自定義圖示：
port
- Type:number
- Default:8080
指定用於 dev 伺服器的埠。
dest
- Type:string
- Default:.vuepress/dist
指定vuepress build的輸出目錄。