十分钟搭建一个Vue风格的博客

前言📕

某个无聊的早晨，我打开个人电脑，看着凌乱的桌面，我陷入了深思。。。

本身的博客😄

我决定弄个网站记录一下，但是本身搭建又太麻烦。。秉持着“咱们不造轮子,只作轮子的搬运工”的理念，我打算去百度上找找😑

原来尤大早就替咱们造好了轮子，Vuepress。简单说明一下，这是一个基于Vue的静态博客系统，不须要搭建云服务器和云数据库，只用本地写入静态文件，而且博客能够搜索进行快速联想到文章，简直不要太方便，开箱即用。

通过好几天的一边学习一边踩坑，基本的结构总算出来了😀

开始搭建👻

首先安装Vuepress，本文使用Yarn进行安装（npm一样能够）。

管理员权限打开终端输入以下指令:

# 1. 建立一个空文件夹
mkdir my-blog
cd ./my-blog
 # 2.建立一个package.json的模块文件
yarn init -y # 或者 npm init -y
 # 3.添加vuepress模块
yarn add -D vuepress 或者：npm install -D vuepress
 # 4.接着在packjson里加入一些指令方便咱们操做项目
"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
    /* 终端中输入 docs:dev 运行项目
       输入 docs:build 打包项目 */
}
复制代码

这时还不能启动，咱们须要手动构建以下文件目录

/my-blog/
  ├── /docs/
  │  ├── /.vuepress/
  │  │  ├── /config/
  │  │  │  ├── nav.js
  │  │  │  └── sidebar.js
  │  │  ├── config.js
  │  │  └── /public/
  │  │         └── /img/
  │  │            ├── favorite.png
  │  │            └── witch.ico
  │  └── README.md
  └── package.json
复制代码

• my-blog 根目录文件夹
• package.json 存放项目依赖包
• docs 存放项目全部的文档和配置
• README.md 项目启动后的主页内容
• .vuepress 存放博客界面的配置以及静态资源
• nav.js 存放首页顶部导航栏配置
• sidebar.js 存放侧边栏配置
• config.js 存放项目主要配置
• public 存放静态资源

或者直接去笔者仓库Clone代码目录 点击此处😊

基本配置🏄‍

首先配置最重要的config.js文件，能够参考个人配置，以下：

const nav = require('./config/nav'); //引入导航栏配置
const sidebar = require('./config/sidebar'); //引入侧边栏配置
const routeConfig = require('./plugins/routeConfig'); //引入路由配置

module.exports = {
    title: "不是博客",
    description: "不是博客",
    head: [
        // 这里的 '/' 指向 docs/.vuepress/public 文件目录 
        ['link', {
            rel: 'icon',
            href: '/img/witch.ico' //配置网页的小图标，以下图
        }]
    ],
    base: '/blog/', // 部署到github会用到的配置
    markdown: {
        lineNumbers: true // 代码块显示行号
    },
    // 顶部导航栏
    themeConfig: {
        displayAllHeaders: true, //展开侧边栏全部的小标题
        sidebarDepth: 1, //提取markdown中h2标题，做为小标题显示在侧边栏上。
        lastUpdated: '最后更新', // 文档更新时间：每一个文件git最后提交的时间,
        nav, //导航
        sidebar, //侧边栏
    },
    plugins: [
        routeConfig,
    ],
}
复制代码

在此推荐一个好看的ico和PNG图标的网站，请放心食用，点击这里🚀

导航栏配置👙

导航能够分为以下三种配置：

1. 仅显示标题到导航栏

2. 显示标题到导航栏，且显示下拉标题

3. 显示标题到导航栏，且分类别显示下拉标题

nav.js配置以下：

const nav = [
    // 1.0 仅显示标题到导航栏
    {
        text: '首页',
        link: '/'
    },
    // 2.0 显示标题到导航栏，且显示下拉标题
    {
        text: '关于做者',
        items: [{
                text: 'GitHub',
                link: 'https://github.com/ordinaryA',
            },
            {
                text: '掘金',
                link: 'https://juejin.im/user/5c38537d518825260d7ec96c',
            }
        ]
    },
    // 3.0 显示标题到导航栏，且分类别显示下拉标题
    {
        text: '大前端',
        items: [{
                text: '基础',
                items: [{
                        text: 'Javascript',
                        link: '/大前端/01.Javascript/',
                        //此处/以docs为根目录
                    },
                    {
                        text: 'ES6',
                        link: '/大前端/02.ES6/',
                    },
                ]
            },
        ]
    }
]
复制代码

侧边栏配置⛳

此处坑极多，容易配置失败，前方高能！！！

再次贴一下仓库地址避免观众老爷们踩坑 点击此处😊

sidebar.js配置以下：

const 摸鱼 = [{
    title: "上班摸鱼", //侧边栏大类标题
    collapsable: false, //false可使侧边栏分组强制打开
    children: [
        [
            //md文件路径，以底部导出的/摸鱼/为根路径
            '01.上班摸鱼/01.摸鱼，是员工给公司的福报.md',
            //侧边栏显示的标题名
            '摸鱼，是员工给公司的福报'
        ],
    ],
}];
const 练习 = [{
        title: "小游戏",
        collapsable: false,
        children: [
            ['01.前言.md', '前言'], 
            ['02.扫雷.md', '扫雷'],
            ['03.管道小鸟.md', '管道小鸟'],
            ['04.贪吃蛇.md', '贪吃蛇'],
        ],
    },
    {
        title: "聊天室",
        collapsable: false,
        children: [
            ['05.聊天室.md', '聊天室'],
        ],
    },
];
module.exports = {
    '/摸鱼/': 摸鱼,
    '/练习/': 练习,
}
复制代码

配置首页🎁

docs目录下的README.md以下：

---
home: true
heroImage: /img/favorite.png
actionText: 摸鱼🐟🐟🐟
actionLink: /PAGE/2019-10-23-touch-fish-hhhh/
features:
- title: 大前端
  details: 埋伏五百刀斧手于账后，以摔杯为号
- title: 练习
  details: 批判的武器不能代替武器的批判
- title: 摸鱼
  details: 摸鱼，是员工给公司的福报
footer: Awesome...
---
复制代码

首页也能够写vue和html代码，笔者正在学习，就不举栗了🥛

更多能够参考官网配置，点击此处 Vuepress🚗

部署🎉

Vuepress项目能够发布到GitHub page上，不须要云服务器，因为笔者用的是本身的服务器，就不分享怎么发布了。

部署的时候有个坑须要注意一下，config.js文件下的base须要填GitHub的配置或者服务器上的根目录名，否则项目构建的dist包的引入路径会出错。

另：构建的dist包在本地是没法运行的，会出现三条黑杠（若是有运行的办法能够留下评论，笔者也还在摸索阶段），可是部署到服务器后会正常显示😆

module.exports = {
    title: "不是博客",
    description: "不是博客",
    head: [
        ['link', {
            rel: 'icon',
            href: '/img/witch.ico'
        }]
    ],
    base: '/blog/', // 部署到github会用到的配置 👈
}
复制代码

更多🧀

当你走到这一步的时候，基本能搭出和我同样的一个博客了😄，Vuepress还有更多高阶的写法，而且可使用Vue的组件，还有美美的主题包，因为笔者还在摸坑阶段，一边摸索一边学习，就记录到这里，更多详细的用法请点击这里 Vuepress🚔。

步骤已经尽量详细了，但愿观众老爷们也能花上一点时间搭上一个本身的博客，简单又实用🙈

在此分享一个平时写MD文档的编辑器，动态展示md转换后的排版，以及各类强大的快捷键，Typora🎈

最后献上一张完成图：

特别鸣谢😊

参考博客为： xin-tan.com/

求个Star（手动滑稽😆）

但愿看完对大家有帮助的朋友能给我点个star，你的star就是对我最大的鼓励，谢谢~

github: github.com/ordinaryA/A…
博客地址: www.almx.top/blog/PAGE/2…