学习笔记 学习笔记
🐱 首页
    • 🚅 JAVA
    • 🚆 Python
    • 🧭 VUE
    • 🌐 JavaScript
    • 🗺 CSS
  • 🎃 MySQL
  • 🛶 Redis
  • 🛳 Nginx
  • ⚽ Dokcer
  • 🏓 Elasticsearch
  • 🏙 Windows
  • 🗽 Centos
  • ⚓ Gitlab
  • 🙈 分类
  • 🙉 标签
  • 🙊 归档
    • 👣 随笔
    • 🌹 关于
GitHub (opens new window)

爱做梦的奋斗青年

曾梦想仗剑走天涯,后来bug太多就没去
🐱 首页
    • 🚅 JAVA
    • 🚆 Python
    • 🧭 VUE
    • 🌐 JavaScript
    • 🗺 CSS
  • 🎃 MySQL
  • 🛶 Redis
  • 🛳 Nginx
  • ⚽ Dokcer
  • 🏓 Elasticsearch
  • 🏙 Windows
  • 🗽 Centos
  • ⚓ Gitlab
  • 🙈 分类
  • 🙉 标签
  • 🙊 归档
    • 👣 随笔
    • 🌹 关于
GitHub (opens new window)
  • 后端技术

  • web技术

    • JavaScript技术栈

    • CSS技术栈

    • VUE技术栈

    • vuepress

      • vuepress入门
        • 1、新建文件夹
        • 2、添加依赖
        • 3、配置 scripts
        • 4、新建 docs
        • 5、markdown 文件
        • 6、启动测试
        • 7、配置首页
        • 8、配置路由
        • 9、配置导航
        • 10、加侧边栏
        • 11 、部署
      • 主题配置
  • 数据结构

  • C语言

  • 编程技术
  • web技术
  • vuepress
爱做梦的奋斗青年
2020-06-24
目录

vuepress入门

Vuepress官网 (opens new window)

VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

# 1、新建文件夹

新建一个名为 blog-heye 的文件夹,进入到该文件夹目录下

# 按默认配置初始化一个项目,此时会在当前目录下生成 package.json 文件
npm init -y
1
2

# 2、添加依赖

将 VuePress 作为一个本地依赖安装

npm install -D vuepress
1

# 3、配置 scripts

在 package.json 里的 scripts 中添加如下代码,不需要修改其它代码

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
1
2
3
4
5
6

# 4、新建 docs

在项目根目录下,新建 docs 文件夹

mkdir docs
1

# 5、markdown 文件

新建一个 markdown 文件

echo '# Hello VuePress!' > docs/README.md
1

# 6、启动测试

输入命令启动项目,在浏览器中访问 http://localhost:8080/即可预览效果

npm run docs:dev
1

# 7、配置首页

打开README.md,修改为:

---
home: true
heroImage: /hero.png        
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
1
2
3
4
5
6
7
8
9
10
11
12
13
14

heroImage后面的图片是放在.vuepress/public下面的,自动读取

# 8、配置路由

// 新建 .vuepress 文件夹
mkdir docs\.vuepress

//在 .vuepress 文件夹下新建 config.js 文件

//config.js 便是一个 Vuepress 网站必要的配置文件,在其中添加如下代码:

module.exports = {
  base: '/blog-demo/',  //站点的基础路径
  title: 'blog-demo',   //网站的标题
  description: 'Vuepress blog demo'  //描述
}
1
2
3
4
5
6
7
8
9
10
11
12

# 9、配置导航

在.vupress/config.js 文件添加一些导航栏链接:

module.exports = {
    themeConfig: {
        // 你的GitHub仓库,请正确填写
        repo: 'https://github.com/xxxxxxx/blog',
        // 自定义仓库链接文字。
        repoLabel: 'My GitHub',
        nav: [
            { text: 'Home', link: '/' },
            { text: 'FirstBlog', link: '/blog/firstBlog.md' }
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

在 docs 目录下新建 blog文件夹。 在 blog 目录下创建 /blog/firstBlog.md 作为我们第一篇博客的内容:

# 博客
这里随便写内容了。。。
比如我的就是该页内容
1
2
3

# 10、加侧边栏

//.vupress/config.js
module.exports = {
  themeConfig: {
    sidebar: [
      ['/', '首页'],
      ['/blog/FirstBlog.md', '我的第一篇博客']
    ]
  }
}
1
2
3
4
5
6
7
8
9

# 11 、部署

  • 在github上新建项目
  • 把本地项目push到远程仓库
  • 修改.vupress/config.js的仓库目录
  • base设置为与远程仓库/<REPO>/同名,比如我的远程是blog,本地是blog-heye,就改成blog。
  • 根目录下创建一个deploy.sh文件
# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

双击deploy.sh 运行脚本,会自动在我们的 GitHub 仓库中,创建一个名为 gh-pages的分支,而我们要部署到GitHub Pages的正是这个分支。

如果docs/.vuepress/dist已经生成,在github上没有找到gh-pages分支,说明提交出错. 修改deploy.sh提交地址为http格式如下:

git push -f https://github.com/<USERNAME>/<REPO>.git master:gh-pages

1
2
  • 在 GitHub 项目点击Setting按钮,找到 GitHub Pages - Source,选择 gh-pages分支,点击 Save按钮后,静静地等待它部署完成即可。 但是我设置的时候发现已经默认是gh-pages分支了。
编辑此页 (opens new window)
上次更新: 2021/01/31 08:17:00
vue2.x使用技巧
主题配置

← vue2.x使用技巧 主题配置→

Theme by Vdoing
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式