vuePress的使用

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

開始安裝android

項目依賴webpack

// 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"
  }
}  

  這裏運行:ios

npm i

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

這些東西是否全有。npm

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

運行:markdown

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

  來建立你的根文件ide

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

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

 

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

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

相關文章
相關標籤/搜索