学习安装vuepress教程

发表于2021-11-12更新于2023-10-17阅读次数

本文是基于linux搭建vuepress

创建vuepress项目文件夹
可以右键手动新建，也可以使用 mkdir 命令新建：

1
mkdir vuepress

全局安装 VuePress命令

1
npm install -g vuepress

会出现两个安装提示，默认即可，耐心等待软件安装完成。

进入 vuepress 文件夹，初始化项目
使用 npm init 或 npm init -y（默认yes）

1
npm init -y

创建文件夹和文件
在 vuepress 文件夹中创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，最终项目结构如下所示：

1
2
3
4
5
6
7
vuepressBlogDemo
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

在 config.js 文件中配置网站标题、描述、主题等信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = {
  title: 'Chen\'s blog',
  description: '我的个人网站',
  head: [ // 注入到当前页面的 HTML <head> 中的标签
    ['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标)
  ],
  base: '/', // 这是部署到github相关的配置
  markdown: {
    lineNumbers: false // 代码块显示行号
  },
  themeConfig: {
    nav:[ // 导航栏配置
      {text: '前端基础', link: '/accumulate/' },
      {text: '算法题库', link: '/algorithm/'},
      {text: '微博', link: 'https://baidu.com'}      
    ],
    sidebar: 'auto', // 侧边栏配置
    sidebarDepth: 2, // 侧边栏显示2级
  }
};

在 package.json 文件里添加两个启动命令

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

一切就绪快去跑起来看看吧

1
npm run dev

以上就是安装vuepress的全过程。