已有项目添加vitepress

已有项目基本配置

1、使用vite-vue-ts搭建项目
2、UI组件库使用arco.design.vue
3、node 版本20.17.0
4、项目使用原子化样式 tailwindcss
5、pnpm 作为包管理工具

添加vitepress

已有的项目中添加vitepress

安装vitepress

pnpm add -D vitepress

初始化vitepress项目

pnpm vitepress init

官方文档给出的说明：

如果正在构建一个独立的 VitePress 站点，可以在当前目录 (./) 中搭建站点。但是，如果在现有项目中与其他源代码一起安装 VitePress，建议将站点搭建在嵌套目录 (例如 ./docs) 中，以便它与项目的其余部分分开。

生成的vitepress项目结构，以及3个script脚本，如下

运行vitepress项目

执行命令,打开地址就能看到vitepress生成的网页，如下：

pnpm docs:dev

在默认主题的基础上添加自定义主题

用于注册UI组件库（ @arco-design/web-vu）和原子样式（ tailwindcss）
docs/.vitepress目录下添加theme文件夹,结构如下：

docs
 -.vitepress
 	-theme
 		-index.ts
 		-style.css
 	-config.ts

theme/index.ts文件中添加如下代码：

import DefaultTheme from "vitepress/theme"
import ArcoVue from "@arco-design/web-vue"
import ArcoVueIcon from "@arco-design/web-vue/es/icon"
import "@arco-design/web-vue/dist/arco.css"
import "./style.css"

export default {
  ...DefaultTheme,
  NotFound: () => "404", // <- this is a Vue 3 functional component
  enhanceApp({ app }) { // 注册arco组件和图标
    app.use(ArcoVue).use(ArcoVueIcon)
  },
}

theme/style.css文件中添加如下代码：

/*导入原子样式*/
@tailwind base;
@tailwind components;
@tailwind utilities;

在config.ts文件添加vite配置，如下

export default defineConfig({
// ...其他配置
  vite: {
    ssr: {
      noExternal: ["@arco-design/web-vue"],
    },
  },
})

解决在打包时，报错
(node:6936) Warning: To load an ES module, set “type”: “module” in the package.json or use the .
(Use node --trace-warnings ... to show where the warning was created)
D:\projects\eon\node_modules.pnpm@arco-design+web-vue@2.55.3_vue@3.3.13_typescript@5.1.6_\node\icon\index.js:1
export { default } from “./arco-vue-icon.js”;
^^^^^^
SyntaxError: Unexpected token ‘export’

在docs目录下的.md文件中使用vue组件

vue组件如下(目录在， src/views/my-buttom.vue)：

使用原子样式（ tailwindcss），@arco-design/web-vue组件库中的Button 组件

// src/views/my-buttom.vue
<template>
    <Button type="primary" class="bg-[red]"> 按钮 </Button>
</template>
<script setup lang="ts">
import { Button } from "@arco-design/web-vue";
</script>

vitepress项目的index.md文件(目录在， docs/index.md)：

md文件引用vue组件

#  docs/index.md
<MyBotton type="primary" class="bg-[red]"> 按钮 </Button>

<script setup>
import MyBotton from '../src/view/my-buttom.vue';
</script>

打包vitepress项目

打包成功就可以预览

pnpm docs:build

预览vitepress项目

pnpm docs:preview