开始使用

写在前面

关于为什么要写这个教程,原因有二,其一是因为 vitepress 才刚出来,中文版的教程不详细,英文版的教程可能大部分人看起来比较麻烦;其二是因为作者最近刚用 vitepress 搭建了一个组件库展示网站,就想趁此机会写个文档吧 😄!

以后可能会出开发自己组件库的教程,如果有兴趣可以私信我,人多的话可能就会提前安排上 🎉,目前文档已在我的 GitHub 仓库了,是我参加青训营的团队一起完成的,但是文档的搭建是我一个人负责的,悄悄夸一下自己 👍。

如果大家想看看效果,其实我没有部署到 GitHub 上,这个以后也会教大家,现在使用方法如下:

  • 首先去克隆我的组件库项目,喜欢的话可以 Star 🌟 一下哈
$ git clone https://github.com/ox4f5da2/seven-bit-docs.git
  • 然后安装依赖
$ pnpm i

对了如果没有安装 pnpm 的可以全局安装一下,运行如下命令即可:

$ npm i pnpm -g

如果提示说无权限写入文件夹的话那就加 sudo 安装即可

  • 然后运行命令启动项目
$ pnpm run docs:dev
  • 最后打开链接应该就能看到了,希望大家喜欢这个文档网站

顺便说一下,我还写了一个刷算法题的网站,都是用 js 写的,网址在这里,想看的可以看看,这是用 vuepress 写的,如果您有 vuepress 基础那么会非常容易上手,好了废话不多说,接下来就介绍怎么使用 vitepress。

创建项目

首先选一个自己喜欢的文件及,然后在这个文件夹里创建一个 vitepress 项目文件夹,自己想叫啥叫啥,然后进入这个文件夹即可,如果大家觉得麻烦可以进入文件夹后运行如下命令:

$ mkdir vitepress && cd vitepress

然后使用自己喜欢的包管理方式,可以是 npmyarnpnpm,初始化项目即可:

  • npm -> npm init -y
  • yarn -> yarn init
  • pnpm -> pnpm init

作者就选 pnpm

安装 vitepress

为了方便书写教程,之后的安装命令都是用 pnpm 了,请大家谅解哈。

安装 vitepress 使用如下命令:

$ pnpm add -D vitepress vue

然后创建一个 md 文档:

$ mkdir docs && echo '# Hello VitePress' > docs/index.md

启动项目

将以下的内容写入 package.json 文件:

{
  ...
   "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  ...
}

然后本地启动服务:

$ pnpm run docs:dev

VitePress 将在 http://localhost:5173 上展示你自己的网站,并且是热更新的。

vitepress 的目录结构

.
├─ docs
│  ├─ .vitepress
│  │   ├─ theme
│  │   │  └─ index.js
│  │   └─ config.js
│  └─ index.md
├─ .gitignore
├─ node_modules
└─ package.json

大概是这么个结构,其实没有具体规定,其实只要路径对匹配了就行了,但是 .vitepress 必须有,然后 config.js 也要有,否则没办法配置了。

💡 注意事项
如果 config.jsindex.js 文件中没有内容的话,页面是无法显示的,应该删除或者添加相关配置,这个在以后会慢慢讲解。

写在最后

到目前应该有一个最简单的网站了,下一个教程我们来实现自己的 Home Page,一般看情况更新吧,如果大家喜欢可以点赞➕收藏这个专栏。

🚀 下一节:

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐