vuePress的使用

今天來玩一玩vuePress的使用，用markdown來編輯一個頁面網站，這裏談論到了簡單使用，細節能夠去官網上去查看

開始安裝

項目依賴

// package.json

{
  "name": "jkl",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vuepress": "^0.14.10"
  },
  "dependencies": {
    "webpack-dev-middleware": "^3.6.0"
  }
}　　

　　這裏運行：

npm i

　　這裏webpack必定要有，我開始安裝的時候，一直報錯，項目起不來。若是項目仍是有問題，請查看vuepress的npm

這些東西是否全有。

接下來建立docs的文件夾，來存放你的項目文件

運行：

echo '# Hello VuePress' > docs/README.md

　　來建立你的根文件

在package.json文件中添加

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

　　上邊的是啓動項目，下邊的是構建項目目錄（靜態打包）

開始的時候啓動靜態打包，出現的目錄結構

 

 config至關於vue中的路由同樣的東西（配置文件）主要的東西全在這裏面

配置了下標題，和地址端口號

module.exports = {
    title:"武宏巖官網",

    host:"0.0.0.0",
    port:8080,
  }

　　配置nav

themeConfig: {
        nav: [
            { text: '主頁', link: '/' },
            { text: '博文',
                items: [
                { text: 'Android', link: './android' },
                { text: 'ios', link: './ios' },
                { text: 'Web', link: './web' }
                ] 
            },
            { text: '關於', link: '/about/' },
        ]
}

　　配置側邊欄

sidebar: [
            {
            title: '統一頁',
            collapsable: false,
            children: [
                ['../android/Android.md', '驗證碼登陸'],
                ['../ios/ios.md', '帳號密碼登陸-找回密碼'],
                ['../web/web.md', '我的中心/個人-關於'],
            ]
        },]

　　配置頁面下的跳轉的方式

sidebarDepth: 2,
    lastUpdated: 'Last Updated', 

　　完整配置

module.exports = {
    title:"武宏巖官網",

    host:"0.0.0.0",
    port:8080,
    themeConfig: {
        nav: [
            { text: '主頁', link: '/' },
            { text: '博文',
                items: [
                { text: 'Android', link: './android' },
                { text: 'ios', link: './ios' },
                { text: 'Web', link: './web' }
                ] 
            },
            { text: '關於', link: '/about/' },
        ],
        sidebar: [
            {
            title: '統一頁',
            collapsable: false,
            children: [
                ['../android/Android.md', '驗證碼登陸'],
                ['../ios/ios.md', '帳號密碼登陸-找回密碼'],
                ['../web/web.md', '我的中心/個人-關於'],
            ]
        },]
    },
    sidebarDepth: 2,
    lastUpdated: 'Last Updated', 
  }

　　這裏面的「/」就是最外層建立的markdown，它就至關於一個頁面的主頁。

　　我們寫的頁面樣式能夠所有都用markdown要進行編寫。

來看最後的效果（左側黑色邊框不是不當心多截一塊）

 

 是否是感受挺簡單，能夠開始你的配置文件之旅了，去吧皮卡丘！！！！

可能細節不是太詳細，哪不明白能夠回消息。不必定何時回你