VuePress介紹
VuePress 由兩部分組成：第一部分是一個極簡靜態網站生成器 (opens new window)，它包含由 Vue 驅動的主題系統和插件 API，另一個部分是為書寫技術文檔而優化的默認主題，它的誕生初衷是為了支持 Vue 及其子項目的文檔需求。
每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML，也因此具有非常好的加載性能和搜索引擎優化（SEO）。同時，一旦頁面被加載，Vue 將接管這些靜態內容，並將其轉換成一個完整的單頁應用（SPA），其他的頁面則會只在用戶瀏覽到的時候才按需加載。
我們以整理前端知識為例，簡單介紹一下vuepress如何使用。
先來看一下效果：
接下來就開始安裝vuepress
1.創建並進入一個新目錄
mkdir vuepress-starter && cd vuepress-starter
2.使用你喜歡的包管理器進行初始化
yarn init 或 npm init
3將 VuePress 安裝為本地依賴
yarn add -D vuepress 或 npm install -D vuepress
4.創建你的第一篇文檔，需要在根目錄下創建docs目錄
mkdir docs
5.在 package.json 中添加一些操作 scripts
{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } }
6.在本地啟動服務器
yarn docs:dev 或 npm run docs:dev
7在docs目錄下創建.vuepress目錄（注意目錄名字最前方有個.）
此目錄中放置重置主題的樣式文件、靜態文件、文檔中菜單的配置項等
/docs/.vuepress/config.js module.exports = { plugins: ['@vuepress/back-to-top’],//此處是添加返回頂部的插件 title: '前端開發知識整理', themeConfig: { logo: '', // 右上角搜索框后面的菜單導航 nav: [ { text: '首頁', link: '/' }, { text: '序言', link: '/guide/' }, { text: '素材', link: 'http://sc.mtokj.com', items: [{ text: '前端開發知識整理', link: '/', items: [{ text: '456', link: '/' }, { text: '456', link: '/' }] }, { text: '前端開發知識整理', link: '/', items: [{ text: '456', link: '/' }, { text: '456', link: '/' }] }] }, { text:'GitHub',link:'https://github.com/dzlishen' } ], //左側菜單 sidebar: [ { title: '序言', path: '/guide/', collapsable: true, // 可選的, 默認值是 true, sidebarDepth: 1, // 可選的, 默認值是 1 }, { title: 'HTML', path: '', collapsable: true, // 可選的, 默認值是 true, sidebarDepth: 4, // 可選的, 默認值是 1 children: [{ title: 'HTML基礎知識', path: '/html/base' }, { title: 'HTML面試題', path: '/html/topic' }] }, { title: 'CSS', path: '', collapsable: true, // 可選的, 默認值是 true, sidebarDepth: 2, // 可選的, 默認值是 1 children: [{ title: 'CSS基礎知識', path: '/css/base' }, { title: 'CSS面試題', path: '/css/topic' }] }, { title: 'Javascript', path: '', collapsable: true, // 可選的, 默認值是 true, sidebarDepth: 4, // 可選的, 默認值是 1 children: [{ title: 'Javascript基礎知識', path: '/javascript/base' }, { title: 'Javascript面試題', path: '/javascript/topic' }, { title: 'Javascript面試題_001', path: '/javascript/topic_001' }, { title: 'Javascript筆試題_002', path: '/javascript/topic_002' }, { title: 'JavaScript 實用工具函數', path: '/javascript/toolFn' }] }, { title: 'VUE', path: '', collapsable: true, // 可選的, 默認值是 true, sidebarDepth: 1, // 可選的, 默認值是 1 children:[{ title:'vue基礎知識', path:'/vue/base' },{ title:'vue面試題', path:'/vue/topic' }] }, { title: '學習資源', path: '/sites/', collapsable: true, // 可選的, 默認值是 true, sidebarDepth: 1, // 可選的, 默認值是 1 }, ] } }
8.首頁配置，也就是上面圖片中的第一副圖片
/docs/readme.md
---
home: true
heroImage:
heroText: 前端開發知識整理
tagline: 前端開發一網打盡
actionText: 快速上手 →
actionLink: /guide/
features:
- title: HTML
details: HTML 指的是超文本標記語言 (Hyper Text Markup Language)。
- title: CSS
details: CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
- title: Javascript
details: JavaScript（簡稱“JS”） 是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言。雖然它是作為開發Web頁面的腳本語言而出名，但是它也被用到了很多非瀏覽器環境中，JavaScript 基於原型編程、多范式的動態腳本語言，並且支持面向對象、命令式、聲明式、函數式編程范式。
footer: Copyright © 2021-JackLee dzlishen@163.com
---
9.最后就是根據config.js中配置的訪問路徑在docs下創建相應的文件夾、**.md文件即可。
基本上就完事了，
本地運行： npm run docs:dev
發布打包：npm run docs:build，然后部署到服務器上使用Nginx或其它中間件運行即可使用了。