安装 node

https://nodejs.org/zh-cn/

安装vuepress

初始化项目

npm init得到文件package.json

安装VuePress

npm install -g vuepress

修改package.json

"scripts": {
    "docs:dev": "vuepress dev docs",    //添加行1
    "docs:build": "vuepress build docs"  //添加行2
  }

启动项目: npm run docs:dev这条命令就等于vuepress dev docs

打包项目: npm run build 这条命令就等于 vuepress build docs`

根目录下创建docs,docs文件夹下创建文件夹.vuepress..vuepress 文件夹下创建touch config.js
修改config.js

module.exports = {
    title: 'koala的博客',
    description: '专注 Node.js 技术栈分享,从前端到Node.js再到数据库',
}

docs 根目录创建README.md作为首页显示

---
home: true
heroImage: /home.png
actionText: Get Started →
actionLink: /node/
features:
- title: day day up
  details: 记录每一天的进步, 一分耕耘,一分收获.
- title: 程序员成长指北
  details: 专注 Node.js 技术栈分享,从 前端 到 Node.js 再到 后端数据库,祝您成为优秀的高级 Node.js 全栈工程师
- title: koala
  details: 一个有趣的且乐于分享的人。座右铭:今天未完成的,明天更不会完成。
footer: MIT Licensed | Copyright © 2018-present Evan You

---

预览npm run docs:dev

配置导航栏nav

在config.js中添加:

themeConfig:{
  nav: [{text: "主页", link: "/"      },
      { text: "node", link: "/node/" },
      { text: "前端", link: "/webframe/"},
      { text: "数据库", link: "/database/"   },
      { text: "android", link: "/android/"   },
      { text: "面试问题", link: "/interview/" }
    ],
}

对应的目录创建在docs 根目录下面

配置侧边栏slider

module.exports = {
  themeConfig:{
    sidebar: 'auto',     //添加这一行到对应的位置,不用全部都添加
    // sidebarDepth: 1 好像设置无效
  }
}

打包项目
运行npm run docs:build将项目打包, 默认打包文件在docs/.vuepress/dist目录下

图片保存根目录:docs\.vuepress\public
默认目录显示文档:readme.md

Last modification:October 12th, 2020 at 10:39 pm
如果觉得我的文章对你有用,请随意赞赏