VuePress 快速搭建个人博客

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

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

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

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

(一)创建项目 跟着快速上手来就行

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

javascript 复制代码
mkdir vuepress-starter && cd vuepress-starter 

2. 初始化项目

javascript 复制代码
yarn init # npm init  

3. 安装VuePress

javascript 复制代码
yarn add -D vuepress # npm install -D vuepress  

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

javascript 复制代码
mkdir docs && echo '# Hello VuePress' > docs/README.md  

5. package.json 的scripts配置

javascript 复制代码
{  
    "scripts": {  
        "docs:dev": "vuepress dev docs",  
        "docs:build": "vuepress build docs"  
    }  
} 

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

javascript 复制代码
"scripts": {  
    "docs:dev": "vuepress dev docs --temp .temp",  
    "docs:build": "vuepress build docs"  
},

6. 在本地启动服务器

javascript 复制代码
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文件里面添加一些配置

快速上手

javascript 复制代码
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文件可以修改项目的默认主题色、默认背景色等,

javascript 复制代码
$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;  
}  
  

这是整个项目完整目录:

效果图:(我没写样式所以看上去比较简陋)

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

相关推荐
脑袋大大的16 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0126 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui