Vitepress搭建组件库文档(上)—— 基本配置

本文档教程详细介绍了如何使用Vitepress 1.0.0-alpha.22搭建组件库文档,从初始化工程、配置Vitepress、设置首页到App配置和主题配置,一步步指导创建组件库文档的过程,并展示了配置后的预览效果。
摘要由CSDN通过智能技术生成

vite 出现以前,vuepress 是搭建组件库文档不错的工具,支持以 Markdown 方式编写文档。伴随着 vite 的发展,vitepress 已经到了 1.0.0-alpha.22 版本,很多博客还是基于 0.x 版本,1.0.00.22 配置略有差别,尤其是一些 vitepress 插件不支持 1.0.0 版本,如 vitepress-theme-demo(用它可以方便的编写组件 demo)。虽然现在 1.0.0 还是 alpha 版本,咱也可以尝试使用,反正遇到什么坑就去填什么坑就可以了呗。

1 初始化工程

1.1 创建项目

创建目录(目录名自己取,这里我取名为 doc-vitepress-archetype)作为文档项目的根目录,在命令行进入该目录,使用 npm/yarn/pnpm 初始化为 npm 项目(生成 package.json)。

pnpm init

之前看过优雅哥文章的伙伴应该清楚,优雅哥一直习惯使用 yarn,但从本文开始,包管理工具我都换做 pnpm,具体原因在后面的搭建 monorepo 风格组件中再谈。

添加 vitepress 为开发依赖:

pnpm install vitepress -D

当前 vitepress 版本为 1.0.0-alpha.22,后面如果发布正式版后有 broken change,咱又更新文章。

1.2 创建目录及文件

  1. 在项目根目录下创建目录 docs(这里的目录名 docs 与后面配置 package.jsonscripts 的参数一致),并在 docs 目录中创建 index.md 文件
# Hello Vitepress
  1. docs 目录下创建公共资源目录 public,该目录与 vite vue3 项目的 public 一样,弄一个 logo.png 到该目录中。

此时目录结构为:

doc-vitepress-archetype/
|- docs/
		|- index.md
		|- public/
				|- logo.png
|- package.json

1.3 添加 scripts

package.json 中添加项目的启动、打包、预览命令:

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

dev 是开发模式启动 vitepress;build 为打包;serve 是对打包后的结果启动服务预览。命令参数中的 docs 就是上面在根目录创建的目录名 docs

1.4 启动服务

在控制台执行 pnpm dev,启动服务,在页面访问控制台输出的地址,默认该页面支持 dark/light 切换。页面如下

dark 模式:

image-20221023150950983

light 模式:

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
VitePress是一个基于Vue.js的静态网站生成器,而Cesium是一个用于创建地球和其他虚拟世界的JavaScript。要在VitePress配置Cesium,可以按照以下步骤进行操作: 1. 首先,确保你已经安装了VitePress和Cesium。你可以使用npm或yarn来安装它们: ``` npm install -g create-vitepress npm install cesium ``` 2. 创建一个新的VitePress项目: ``` create-vitepress my-project cd my-project ``` 3. 在项目根目录下创建一个`vite.config.js`文件,并添加以下内容: ```javascript import { defineConfig } from 'vite' export default defineConfig({ // 其他配置项... resolve: { alias: { cesium: 'cesium/Cesium', }, }, css: { preprocessorOptions: { scss: { additionalData: `@import "./path/to/your/cesium/Widgets/widgets.scss";`, }, }, }, optimizeDeps: { include: ['cesium'], }, }) ``` 4. 在你的Markdown文件中,可以使用Cesium相关的代码。例如,在一个Markdown文件中添加一个简单的Cesium示例: ```markdown # Cesium 示例 <ClientOnly> <template> <div id="cesiumContainer"></div> </template> <script> import { onMounted } from 'vue' import * as Cesium from 'cesium' export default { setup() { onMounted(() => { const viewer = new Cesium.Viewer('cesiumContainer') }) }, } </script> </ClientOnly> ``` 5. 运行`npm run dev`来启动VitePress开发服务器,并查看你的Cesium配置是否正常工作。 希望以上步骤能够帮助你成功配置VitePress和Cesium。如果你有任何进一步的问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员优雅哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值