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要進行編寫。

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

 

 是不是感覺挺簡單，可以開始你的配置文件之旅了，去吧皮卡丘！！！！

可能細節不是太詳細，哪不明白可以回消息。不一定什么時候回你