手把手教你用 VuePress 快速搭建个人技术博客~

一、什么是 VuePress ?VuePress 是基于 vue 的极简静态网站生成器，实际上就是一个 vue 的单页应用，内置 webpack，可以用来写文档。详见 VuePress中文网VuePress 可用于将 markdown 文件展示为 WEB 页面二、展示效果首页文档页三、开始搭建目标：记录我学习HTMl、CSS、JavaScript的笔记。创建含有三篇文章（HTML、CSS、Java

静夜聆雨

3109人浏览 · 2021-10-31 18:26:58

静夜聆雨 · 2021-10-31 18:26:58 发布

一、什么是 VuePress ?

VuePress 是基于 vue 的极简静态网站生成器，实际上就是一个 vue 的单页应用，内置 webpack，可以用来写文档。详见 VuePress中文网

VuePress 可用于将 markdown 文件展示为 WEB 页面

二、展示效果

首页

在这里插入图片描述

文档页

在这里插入图片描述

三、开始搭建

目标：记录我学习HTMl、CSS、JavaScript的笔记。创建含有三篇文章（HTML、CSS、JavaScript）的项目

前提条件

使用 VuePress 需要先安装 Node.js，版本号要在 8.6 以上

1.创建项目目录并进入

mkdir my-vuepress
cd my-vuepress

2.初始化

yarn init -y
# 或者使用 npm init -y

以下都将使用 yarn 包管理器

3.将 VuePress 安装为本地依赖

yarn add -D vuepress	# 安装为开发依赖

4.创建文件夹和文件

基本文件夹结构

my-vuepress
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│			├── logo.png
│       └── config.js
└── package.json

在这里插入图片描述

文档文件夹结构

my-vuepress
├─── docs
│   ├── css
│   ├── JavaScript
│   ├── html
│       ├── assets
│       ├── REMDME.md
│       ├── HTML01.md
│       ├── HTML02.md
│       ├── HTML03.md
│       ├── HTML04.md
│       ├── HTML05.md

其中，每个文章的文件夹内都需要有一个 README.md 文件，该文件是每篇文章的首页。剩余的md文件是子页面。assets 存放图片等内容，md 文件中不要使用一级标题，引用资源时路径使用相对路径

5.在 package.json 中添加 scripts

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

效果如下：

{
  "name": "my-vuepress",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "vuepress": "^1.8.2"
  },
 "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
}
}

6.配置 README.md

README.md 是项目首页的内容，如果想快速看到效果，可以直接在里面写一段内容，例如：

## 欢迎访问我的第一个页面

然后运行

yarn dev

即可看到页面效果：
在这里插入图片描述

7.配置 config.js

module.exports = {
    title: '我的vuepress', //网站标题
    description: '我的个人网站', //网站描述
    head: [ //注入到当前HTMl页面 <head> 中的标签
        ['link', {
            rel: 'icon',
            href: '/logo.png' //图片应存放在public目录下
        }], // 增加一个自定义的 favicon(网页标签的图标)
    ],
    markdown: {
        lineNumbers: false // 代码块显示行号
    },
    themeConfig: {
        nav: [{ //导航栏
                text: 'HTML笔记',
                link: '/html/'
            },
            {
                text: 'CSS笔记',
                link: '/css/'
            },
            {
                text: 'JS笔记',
                link: '/JavaScript/'
            }

        ],
        sidebar: {
            //sidebar: 'auto', // 侧边栏配置,设置auto是自动配置
            //sidebarDepth: 2, // 侧边栏显示2级

            '/html/': [{
                title: 'HTML笔记',
                sidebarDepth: 2,
                collapsable: true, //可折叠
                children: ['', 'HTML01', 'HTML02', 'HTML03', 'HTML04', 'HTML05'] //2级页面，第一个设置为空字符串时，显示的是README.md的内容
            }],
            '/css/': [{
                title: 'CSS笔记',
                sidebarDepth: 2,
                collapsable: true,
            }],
            '/JavaScript/': [{
                title: 'JS笔记',
                sidebarDepth: 2,
                collapsable: true,
            }]
        }
    },

    /**
     * Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
     */
    // 插件，安装后才能使用 ，安装方法 yarn add -D 插件名称
    plugins: [
        '@vuepress/plugin-back-to-top', //返回顶部的插件
        '@vuepress/plugin-medium-zoom', //图片放大的插件
        [
            'one-click-copy',
            {
                copyMessage: '复制成功'
            }
        ],
        ['vuepress-plugin-code-copy', true] //一键复制的插件
    ]
}

8.配置完成，查看效果

运行 yarn dev，启动服务器

在这里插入图片描述

个人博客就搭建好啦！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^