使用vuepress搭建靜態(tài)博客的示例代碼
什么是vuePress
vuePress是以vue驅動的主題系統(tǒng)的簡約靜態(tài)網(wǎng)站生成工具（擁有自己的默認主題）。
veuPress由vue,vue-router,webpack驅動的單頁面應用，每個markdonw文件都使用markdonw-it編譯為html文件，然后作為vue組件的模板來處理。
VuePress 有很多優(yōu)點：
- 界面簡潔優(yōu)雅（個人感覺比 HEXO 好看）
- 容易上手（半小時能搭好整個項目）
- 更好的兼容、擴展 Markdown 語法
- 響應式布局，PC端、手機端
- Google Analytics 集成
- 支持 PWA
安裝vuePress
全局安裝
在此方式中，只是要項目根目錄創(chuàng)建了一個README.md文件，直接執(zhí)行訪問的就是此文件
npm install -g vuepress # 創(chuàng)建一個 markdown 文件 echo '# Hello VuePress' > README.md # 開始編寫文檔 vuepress dev # 構建 vuepress build
在已有項目中安裝
# 安裝為本地依賴項 npm install -D vuepress # 創(chuàng)建一個 docs 目錄 mkdir docs # 創(chuàng)建一個 markdown 文件 echo '# Hello VuePress' > docs/README.md # 開始編寫文檔 npx vuepress dev docs
還可以在package.json中添加js腳本，官網(wǎng)方式不好寫，我們直接用常用的方式
{
"scripts": {
"start": "vuepress dev docs",//運行
"build": "vuepress build docs"http://打包
}
}
使用vuePress搭建靜態(tài)博客
接下來就是配置了，我會直接把我的配置文件貼上來，我們先看結構
博客結構
博客結構分為主頁，導航欄，側邊欄
在.docs目錄下新建一個.vuePress文件，在此注意，搭建博客過程中所有的配置文件以及內容文件、主題等都放在此目錄中
在.vuePress文件夾下新建三個文件,public用來放圖片等靜態(tài)文件，theme中放到博客用到的主題，config.js中存放所有的配置
.vuePress ---public ---theme ---config.js
在.docs文件夾下新建幾個模塊文件夾，比如我的就分為學習筆記、問題記錄、關于我等,每個文件夾下再新建md文件
vuePress會自動把README.md設置為導航的主頁，所以如果我們需要主頁就先建README.md,再新建first.md,seconde.md等文件作為側邊欄要顯示的文件
.docs ---.vuePress ---about ---README.md ---first.md ---seconde.md ---study ---problem
具體配置
最重要的config.js配置
在此值得注意的是，主題配置不只是簡單的樣式配置等，其中包括導航與側邊欄部分的配置，此處配置參見官網(wǎng)導航欄”默認主題配置“
module.exports = {
//網(wǎng)站標題
title: '霍夢林的個人博客',
// 主頁描述
description: 'Just playing around',
// 要部署的倉庫名字
base: '/',
dest: './docs/.vuepress/dist',
// 主題配置
themeConfig: {
// 導航配置
nav: [
// text為導航欄顯示文字，link為路徑，即文件夾名字，注意不要丟了名字前后的'/'
{text: 'Home', link: '/'},
{text: 'About', link: '/about/'},
{text: 'Problem', link: '/problem/'},
{text: 'Study', link: '/study/'},
{text: 'CSDN', link: 'http://blog.csdn.net/weixin_38318244/'},
{text: 'Github', link: 'https://github.com/momo-0902'}
],
// 側邊欄配置,側邊欄組，不同（導航）頁面對應不同的側邊欄
// 以對象形式配置，前邊的key為nav處的路徑,后邊提供一個數(shù)組作為此側邊欄中的子標題
sidebar: {
'/problem/': [
// ''空字符串代表主頁，顯示README.md中的內容
'',
['201709', '201709'],//使用數(shù)組為側邊欄起別名，前邊是md名稱，后邊是鏈接顯示的文字
['201710', '201710'],
],
'/study/': [
'',
['axios', '1.axios'],
['document', '2.document'],
]
},
// 這是嵌套標題鏈接，自動顯示當前激活（導航）頁面標題的鏈接，即顯示深度（h1-h6的深度）
sidebarDepth: 1
}
}
網(wǎng)站主頁配置，即.docs下README.md的配置
--- // 使用默認主題 home: true // 主頁頭像 heroImage: /me.jpg // '開始學習'快捷按鈕 actionText: Get Started → // 快捷按鈕跳轉路徑 actionLink: /about/ features: - title: Simplicity First details: Minimal setup with markdown-centered project structure helps you focus on writing. - title: Vue-Powered details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue. - title: Performant details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded. footer: MIT Licensed | Copyright © 2018-present momo --- [[toc]] :tada: :100: 啦啦啦德瑪西亞 啦啦啦啦擼啊擼啊 <!--  --> 這里使用了 markdown 的拓展 `[[toc]]` ## 這里是momo的博客 ### 項目中遇到的問題 ### 學習筆記 ### csdn ### github [關于我](/about/)
theme主題配置
項目中只是把vuePress所有的主題配置都拷貝到了本項目中，項目結構如下：
theme ---styles ---theme.styl ---code.styl ---Home.vue ---Layout.vue ---until.js
打包部署
構建
// 此處構建生成路徑為./docs/.vuepress/dist,由config.js中配置： dest: ‘./docs/.vuepress/dist', vuepress build docs
導航到構建輸出目錄
// config.js中dest配置的輸出目錄是哪此處就cd進入哪，所有的git操作（包含初始，添加，提交等）都在此目錄下 cd docs/.vuepress/dist git init git add -A git commit -m ‘deploy'
推到你的倉庫
如果是部署到<username>.github.io的主頁上
git push origin master
這時可能出現(xiàn)問題
fatal: ‘origin' does not appear to be a git repository
以及fatal: Could not read from remote repository.
解決辦法： 執(zhí)行git remote add origin git@github.com:<USERNAME>/<REPO>.git
如果是部署到分支上
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages (git push -f git@github.com:momo-0902/wiki.git master:gh-pages)
可在package.json中配置腳本運行
npm start 運行項目
npm run build 打包
npm run deploy 部署
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
今天遇到一個復制粘貼的需求,研究之后發(fā)現(xiàn)太簡單了,這篇文章主要給大家介紹了關于vue中js實現(xiàn)點擊復制文本到剪貼板的3種方案,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue中的文字換行問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue動態(tài)數(shù)據(jù)實現(xiàn)?el-select?多級聯(lián)動、數(shù)據(jù)回顯方式
這篇文章主要介紹了Vue動態(tài)數(shù)據(jù)實現(xiàn)?el-select?多級聯(lián)動、數(shù)據(jù)回顯方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue+Bootstrap收藏（點贊）功能邏輯與具體實現(xiàn)
這篇文章主要為大家詳細介紹了Vue+Bootstrap收藏（點贊）功能邏輯與具體實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了vue金額格式化保留兩位小數(shù)的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3的頁面跳轉有兩種方式，第一種是標簽內跳轉，第二種是編程式路由導航，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2023-05-05
vue實現(xiàn)的多頁面項目如何優(yōu)化打包的步驟詳解
這篇文章主要介紹了vue實現(xiàn)的多頁面項目如何優(yōu)化打包的步驟詳解，文中通過示例代碼以及圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-07-07
下面小編就為大家分享一篇淺談VUE監(jiān)聽窗口變化事件的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)計步器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
Vue3 的ref和reactive的用法和區(qū)別示例解析
ref和reactive是Vue3中用來實現(xiàn)數(shù)據(jù)響應式的API,一般情況下,ref定義基本數(shù)據(jù)類型,reactive定義引用數(shù)據(jù)類型,本文給大家介紹Vue3 的ref和reactive的用法和區(qū)別,感興趣的朋友一起看看吧2023-10-10