今天來玩一玩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要進行編寫。
來看最後的效果(左側黑色邊框不是不當心多截一塊)
是否是感受挺簡單,能夠開始你的配置文件之旅了,去吧皮卡丘!!!!
可能細節不是太詳細,哪不明白能夠回消息。不必定何時回你