Vuepress介紹
官網：https://vuepress.vuejs.org/
類似hexo一個極簡的靜態網站生成器,用來寫技術文檔不能在爽。
Vuepress特點
- 響應式,也可以自定義主題與hexo類似
- 內置markdown(還增加了一些擴展),並且可以在其使用Vue組件
安裝
初始化項目
npm install -g vuepress
創建一個MarkDown文檔
echo '# Hello VuePress' > README.md
編寫文檔
vuepress dev
編譯文檔
vuepress build
結構目錄
├── docs
│ ├── .vuepress
│ │ ├── public
│ │ └── config.js
│ │
│ └── README.md
│
└── package.json
配置config.js文件
module.exports = { title: "這里是標題", description: "每天都有進步就是最大的進步。", base: '/', // 項目根路徑 dest: '/dist/', // 打包后的文件夾路徑 // head 標簽中的額外內容 head: [ ['link', { rel: 'icon', href: '/favicon.ico' }] // 這個是標簽頁 logo ], // 語言配置 locales: { // 鍵名是該語言所屬的子路徑 // 作為特例，默認語言可以使用 '/' 作為其路徑。 '/': { lang: 'zh-CN', // 將會被設置為 <html> 的 lang 屬性 } } }
主題配置
themeConfig同樣是配置在config.js中的
// 主題配置 themeConfig: { // 頂部導航 nav: [ { text: '首頁', link: '/' }, { text: '歸檔', link: '/archives/'}, { text: '分類', link: '/categories/' }, { text: '標簽', link: '/tags/' }, { text: '關於我', link: '/about/' } ], // 側邊欄 sidebar: [ '/' ], sidebarDepth: 2, // 默認 1 提取到 h2，0 為禁用，2 為 h2，h3 displayAllHeaders: false, // 默認值：false 側邊欄只會顯示由當前活動頁面的標題組成的鏈接 activeHeaderLinks: true, // 默認值：true 滾動時通過 hash 高亮側邊欄標題 // Git 倉庫和編輯鏈接 repo: 'username/repo', // 你的倉庫 repoLabel: 'GitHub', // 導航欄上的文本 editLinks: true, // 默認為 "Edit this page" editLinkText: '編輯此頁面' }
首頁
配置 docs 下的 README.md
--- home: true heroImage: /hero.jpg heroText: Hero tagline: Hero 副標題 actionText: 快速上手 → actionLink: /zh/guide/ features: - title: 簡潔至上 details: 以 Markdown 為中心的項目結構，以最少的配置幫助你專注於寫作。 - title: Vue驅動 details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可以使用 Vue 來開發自定義主題。 - title: 高性能 details: VuePress 為每個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將作為 SPA 運行。 footer: MIT Licensed | Copyright © 2018-present Evan You ---
ps：首頁必須設置 home 為 true。默認樣式與官方文檔首頁一致。
至此，就完成了基礎的搭建，下一章使用netlify實現vuepress自動化構建。