聊聊 vitePress是什么 vitePress 是 vite + vue3 的静态网站生成器。 它有 vuePres

是什么

vitePress 是 vite + vue3 的静态网站生成器。

1. 它有 vuePress 的所有优点： 可以在 md 组件里混人 vue 组件。
2. 它有 vite 的速度， 实时服务启动，根据需要编译页面，支持 hmr 热重载
3. 它如 vuePress 一样适合做项目管理文档和博客开发。

依赖

yarn init
yarn add --dev vitepress

安装

新建 docs 文件夹， index.md 输入内容。 用于测试服务是否配置成功

scripts: {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "servce": "vitepress serve docs"
}

配置好package.json 后 启动服务 http://127.0.0.1 访问该服务。

配置

我们可以自定义一些 vitepress 的配置， 在 docs 目录下创建 .vitepress/config.js 文件，写入响应的配置

module.exports = {
    base: "/docs/",
    title: "我的博客",
    description: "一个博客网站"
}

资源处理

1. 图片资源

![An image](./image.png)

所有引用的资源文件

-在生产打包时，会被复制到 dist 目录并文件名会带上 hash -未被引用的资源文件不会被复制 -图片资源小于 4kb 的会被 base64

1. 公开文件

public 目录是个特殊的目录

• 用来放置你没有在任何 markdown 里面引用的资源文件
• 这个目录下的文件名不会被重命名加上 hash 值
• 引用该目录的资源需要直接使用根路径引用，比如 public/icon.png 文件则需要通过 /icon.png 引用

配置侧边栏

module.exports = {
  base: '/docs/',
  title: "我的博客",
  description: "一个博客网站",
  themeConfig: {
    sidebar: {
      "/": [
        {
          text: "javascript",
          children: [{
            text: "原型",
            link: "/javascript/原型"
          }]
        },
        {
          text: "vue",
          children: [{
            text: "vue3汇总",
            link: "/vue/vue3汇总"
          }]
        }
      ]
    }
  }
}

以上是简单常用的配置，想要深入的了解学习，可以查看官方文档。

我是前端小白，👋

参考

1. 手册： fttp.jjf-tech.cn/vitepress/