VuePress 快速搭建个人博客

最近做的一个项目阅读手册，刚开始我想的是直接用vue搭建页面，里面的方法、组件的介绍就用pre标签，然而这样花费的时间久比较多了，不灵活，万一文档有改动也比较麻烦。

后来找到了一些优秀强大的工具：VuePress、VitePress

可以快速搭建自己的博客，也可以作为项目说明文档 本次选择的是VuePress，下面简单来说说我使用VuePress的一些经验吧

VuePress v1.x 官方文档：vuepress.vuejs.org/zh/guide/

（一）创建项目 跟着快速上手来就行

1. 创建并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter 

2. 初始化项目

yarn init # npm init  

3. 安装VuePress

yarn add -D vuepress # npm install -D vuepress  

4. 新建文件夹docs 在docs下新建.md文件 README.md

mkdir docs && echo '# Hello VuePress' > docs/README.md  

5. package.json 的scripts配置

{  
    "scripts": {  
        "docs:dev": "vuepress dev docs",  
        "docs:build": "vuepress build docs"  
    }  
} 

也可以使用，这样运行的话就是实时更新，不然每次修改了东西都要重新

"scripts": {  
    "docs:dev": "vuepress dev docs --temp .temp",  
    "docs:build": "vuepress build docs"  
},

6. 在本地启动服务器

yarn docs:dev # npm run docs:dev

到此，项目就算创建完成了，接下来开始配置路由和基本配置

（二）路由和基本配置

• 在docs目录下新建文件夹.vuepress
• 在.vuepress下新建js文件config.js
• 在.vuepress下新建文件夹public 在public里面favicon.ico等一些图片
• 在.vuepress下新建文件夹styles 在styles里面新建palette.styl 创建完成应该是这样：

目录建好以后，在config.js文件里面添加一些配置

快速上手

module.exports = {
    head: [
        ['link', {rel: 'stylesheet', href: '/css/style.css'}],
    ],
    title: 'emptyProject',
    description: '描述',
    plugins: [
        ['vuepress-plugin-code-copy', true],
    ],
    configureWebpack: {
        node: {
            global: true,
            process: true
        },
    },
    themeConfig: {
        home: true, // 开启首页功能
        search: true,// 内置搜索
        searchMaxSuggestions: 10,//搜索最大建议
        lastUpdated: 'Last Updated', // 最后更新时间
        smoothScroll: true,//页面滚动
        // 导航栏链接
        nav: [
            { text: '首页', link: '/' },
            { text: '快速上手', link: '/view/about' },
            { text: 'git仓库', link: 'http://xxxxx.git' },
        ],
        // 侧边栏
        sidebar: [
            {
                title: '开发指南',
                // path: '/view/about',标题不要跳转效果就不写path
                collapsable: false, // 可选的, 默认值是 true,
                sidebarDepth: 1,    // 可选的, 默认值是 1
                children: [
                    {
                        title: '快速上手',
                        path: '/view/about',
                    }
                ]
            },
        ]
    }
}
  

palette.styl文件可以修改项目的默认主题色、默认背景色等，

$accentColor = #409EFF //默认主题颜色  
$textColor = #303133 //默认字体颜色  
$borderColor = #eaecef//默认边框颜色  
$codeBgColor = #282c34//默认背景颜色  
  
//示例修改相关样式f12找到需要修改的地方找到对应class类拿过来直接用就行了  
.theme-default-content:not(.custom) {  
max-width: 780px;  
}  
.home .hero img {  
height: 60px;  
margin-top: 150px;  
margin-bottom: 10px;  
}  
  
.home .footer {  
border-top: none;  
}  
.navbar .site-name {  
color: transparent;  
}  
  

这是整个项目完整目录：

效果图：（我没写样式所以看上去比较简陋）

作者：希望得到你点赞的小白