安装 node
安装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