VueDoc Markdown 框架教程

VueDoc Markdown 框架教程

mdGenerate a Markdown Documentation for a SFC Vue Component. Contribute: https://gitlab.com/vuedoc/md#contribute项目地址:https://gitcode.com/gh_mirrors/md1/md

1. 项目目录结构及介绍

VueDoc Markdown 项目的目录结构通常如下：

.
├── docs/            # 文档源文件夹
│   ├── components/  # 组件相关的文档
│   └── guides/       # 使用指南和其他页面
├── package.json     # 项目依赖和脚本配置
├── node_modules/    # 第三方依赖包
└── vite.config.js    # Vite 构建配置文件

• docs: 存放所有 Markdown 格式的文档源文件。

  • components: 这个子目录用于存放组件相关的文档。
  • guides: 包含使用指南、最佳实践等非组件的文档页。

• package.json: 该项目的配置文件，包含了项目依赖和自定义脚本。

• node_modules: 安装的npm包和框架的依赖库。

• vite.config.js: 针对Vite构建工具的配置，影响VueDoc Markdown的构建过程。

2. 项目的启动文件介绍

在 VueDoc Markdown 中，通常使用 npm run dev 来启动开发服务器。这个命令是在 package.json 文件中定义的脚本。例如：

{
  "scripts": {
    "dev": "vite preview",
    "build": "vite build"
  }
}

• dev: 启动开发模式，提供实时重载和热模块替换功能，方便文档编辑预览。
• build: 执行生产环境构建，将文档转换并优化为静态HTML，适合部署到服务器。

执行 npm run dev 命令会运行 vite preview，它会在本地启动一个服务器，让你可以在浏览器中查看和测试文档。

3. 项目的配置文件介绍

vite.config.js 文件是Vite构建工具的配置文件，你可以在这里定制VueDoc Markdown的构建行为。以下是一个基础示例配置：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuedoc from 'vuedoc/md';

export default defineConfig({
  plugins: [
    vue(),
    vuedoc({
      src: './docs', // 指定Markdown文件路径
      dest: './dist/docs', // 输出文件夹
      routesPrefix: '/docs', // 站点文档路由前缀
      componentsPath: './src/components', // 组件源代码路径
    }),
  ],
  server: {
    port: 3000, // 开发服务器端口
  },
});

• plugins: 添加的插件列表，这里包含 vue 和 vuedoc 插件来支持Vue组件解析和Markdown渲染。
• vuedoc: 是Vuedoc Markdown的配置对象，可以设置文档源(src)、输出目标(dest)以及组件路径(componentsPath)等。
• server.port: 设置开发服务器监听的端口。

通过调整 vite.config.js 文件中的选项，你可以自定义文档构建和展示方式，以满足你的项目需求。

mdGenerate a Markdown Documentation for a SFC Vue Component. Contribute: https://gitlab.com/vuedoc/md#contribute项目地址:https://gitcode.com/gh_mirrors/md1/md