VuePress從零開始

時間 2019-11-09

標籤 vuepress 開始简体版

原文原文鏈接

VuePress

VuePress 由兩部分組成：一個以 Vue 驅動的主題系統的簡約靜態網站生成工具，和一個爲編寫技術文檔而優化的默認主題。它是爲了支持 Vue 子項目的文檔需求而建立的。vue

由 VuePress 生成的每一個頁面，都具備相應的預渲染靜態 HTML，它們能提供出色的加載性能，而且對 SEO 友好。然而，頁面加載以後，Vue 就會將這些靜態內容，接管爲完整的單頁面應用程序(SPA)。當用戶在瀏覽站點時，能夠按需加載其餘頁面。git

VuePress中文網github

環境搭建

安裝

Node.js版本須要>=8才能夠。npm

npm install -g vuepress 或者在已有項目中安裝
npm install vuepress -D

安裝完成檢測是否安裝成功json

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文件服務器

npm init -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文件夾。框架

mkdir docs

設置package.json

在script中添加dev啓動和build打包腳本命令ide

"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目錄

npm run build

可直接打包構建README.md文件並生成.vuepress

.vuepress 目錄這是放置全部 VuePress 特有(VuePress-specific) 文件的地方。

建立config.js

不作任何配置的話，頁面會顯得過於簡單，用戶也沒法方便地瀏覽網站；

配置 VuePress 站點的基本文件是 .vuepress/config.js，其中導出一個 JavaScript 對象：

touch config.js

目錄結構

├── docs # 文檔目錄
│    ├── .vuepress //存放全部資源和打包結果
│   │         ├── dist //打包結果
│   │        ├── public //公共資源文件
│   │        ├── ...
│   │       └── config.js //配置文件
│   ├── demo //分類文檔存儲
│   │    ├── demo1.md
│   │    ├── ...
│   │    └── demon.md
│   └── README.md 
└── package.json//項目啓動配置

基本配置

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 的輸出目錄。

效果

導航配置

配置代碼

你能夠經過 themeConfig.nav 將連接添加到導航欄中：

module.exports = {
  
    themeConfig: {
        nav: [
          { text: '主頁', link: '/' },
          { text: '測試', link: '/test/test.md' },
          { text: '百度', link: 'https://www.baidu.com' },
        ]
      }
}

能夠添加遠程鏈接如：

{ text: '百度', link: 'https://www.baidu.com' },

也能夠添加本地文件：

{ text: '測試', link: '/test/test.md' },

效果

側邊欄配置

基本配置

你能夠省略 .md 擴展名，以 / 結尾的路徑被推斷爲 */README.md 。該連接的文本是自動推斷的（從頁面的第一個標題或 YAML front matter 中的顯式標題）。若是你但願明確指定連接文本，請使用 [link,text] 形式的數組。

themeConfig: {
    sidebar: [
        ['/', '簡介'],
        ['/cst/cst.md', '車商通'],
        ['/new/index1.md', '發佈新框架'],
        ['/feedback/feedback.md', '問題反饋']
    ]
}

注意：文件命名不要用index關鍵字

側邊欄組配置

使用對象將側邊欄連接分紅多個組：

themeConfig: {
    sidebar: [
        ['/', '簡介'],
        {
            title: "車商通",
            collapsable: false,
            children:[
                ['/cst/cst.md', '車商通'],
                ['/cst/draft.md', '草稿箱'],
                ['/cst/esc.md', '二手車']
            ]
        },
        {
            title: "新框架",
            collapsable: true,
            children:[
                ['/new/testindex1.md', '發佈新框架'],
                ['/new/local/entry.md', '本地開發'],
                ['/new/feedback/feedback.md', '問題反饋']
            ]
        },

        ['/feedback/feedback.md', '問題反饋']
    ]
}

側邊欄組默認狀況下是可摺疊的。你能夠強制一個組始終以 collapsable：false 打開。

多側邊欄

若是你但願爲不一樣的頁面組顯示不一樣的側邊欄，請先將頁面組織到目錄中：

.
├─ README.md
├─ cst
│  ├─ README.md
│  ├─ draft.md
│  └─ esc.md
└─ new
   ├─ README.md
   ├─ local/entry.md
   └─ feedback/feedback.md

代碼展現：

themeConfig: {
    nav: [
        { text: '主頁', link: '/' },
        { 
            text: '技術',
            items: [
                { text: '車商通', link: '/cst/' },
                { text: '新框架', link: '/new/' }
            ]
        }
      ],
    sidebar: {
        '/cst/': [
            ['', '車商通'],
            ['draft', '草稿箱'],
            ['esc', '二手車']
        ],
        '/new/': [
            ['', '發佈新框架'],
            ['local/entry.md', '本地開發'],
            ['feedback/feedback.md', '問題反饋']
        ]
    }
}

效果：

注意：訪問入口進來默認加載README

完整示例

module.exports = {
    base: "/docSynopsis/", //文件訪問地址
    dest: "docSynopsis", //文檔打包輸出目錄
    title: '文檔系統使用手冊', //文檔title
    description: '文檔系統使用手冊',
    head: [
        ['link', { rel: 'icon', href: '/favorite.jpg' }]
    ],
    themeConfig: {
        repo: 'vuejs/vuepress', // github連接配置
        nav: [
            { text: '主頁', link: '/home/instructions' }
          ],
        sidebar: [
            ['/home/instructions', '簡介'],
            {
                title: "系統功能",
                collapsable: false,
                children:[
                    ['/home/add', '文檔添加'],
                    ['/home/list', '文檔列表'],
                    ['/home/edit', '文件編輯'],
                    
                ]
            },
            ['/tool/igit', 'igit公共帳號'],
            {
                title: "文檔工具",
                collapsable: false,
                children:[
                    ['/tool/gitbook', 'gitbook簡介'],
                    ['/tool/vuepress', 'vuepress簡介']
                ]
            }
        ]
    }
};

效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。