快速開始

安裝依賴

mkdir <projectName>路徑下
cd <projectName>
npm init -y
npm i -D vitepress

pkg#scripts

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

目錄結構

.
-| docs
  -| index.md // 文檔首頁
  -| quikstart/

文檔首頁

// index.md
---
home: true
heroText: 基於element-plus二次封裝組件
tagline: 高擴展的組件庫
actionText: 快速開始
actionLink: //
features:
  - title: 簡潔至上
    details: 所有組件支持全量引入和按需引入
  - title: 高擴展性
    details: 全新的組件API設計，支持高度自定義
  - title: 全面覆蓋
    details: 涵蓋基礎組件、通用組件和業務組件
---

運行npm run docs:dev，效果如下：

更多配置見：https://github.com/vuejs/vite...

文檔配置

新建文件docs/.vitepress/config.js

文檔頭

// docs/.vitepress/config.js
module.exports = {
  // 站點名稱
  title: '基於element-plus二次封裝組件',
  // 部署的基礎路徑
  base: '/',
  // 生成html的head配置：站點favicon...
  head: [

  ],
  themeConfig: {
    // 頭部導航
    nav: [
      {
        text: '首頁',
        link: '/'
      },
      {
        text: '百度',
        link: 'http://baidu.com' // 外部鏈接有特定標識
      },
    ]
  }
}

側邊欄

sidebar配置

// docs/.vitepress/config.js
module.exports = {
  // 站點名稱
  title: '基於element-plus二次封裝組件',
  // 部署的基礎路徑
  base: '/',
  // 生成html的head配置：站點favicon...
  head: [

  ],
  themeConfig: {
    // 頭部導航
    nav: [
      {
        text: '首頁',
        link: '/'
      },
      {
        text: '百度',
        link: 'http://baidu.com' // 外部鏈接有特定標識
      },
    ],
    sidebar: [
      {
        text: '介紹',
        link: '/intro/'
      },
      {
        text: '安裝',
        link: '/install/'
      },
      {
        text: '快速開始',
        link: '/quickstart/'
      }
    ]
  }
}

目錄結構

.
-| docs
 ├── Install
 │   └── index.md
 ├── Intro
 │   └── index.md
 ├── Quickstart
 │   └── index.md
 └── index.md

在非根路徑（非首頁）下的index.md中的內容隨意寫一些md語法。

Notes: 目錄結構即路由

首頁跳轉

修改根路徑下的index.md：

---
home: true
heroText: 基於element-plus二次封裝組件
tagline: 高擴展的組件庫
actionText: 快速開始
actionLink: /intro/
features:
  - title: 簡潔至上
    details: 所有組件支持全量引入和按需引入
  - title: 高擴展性
    details: 全新的組件API設計，支持高度自定義
  - title: 全面覆蓋
    details: 涵蓋基礎組件、通用組件和業務組件
---

Notes: 每次修改config配置文件都需要重新啓動npm run docs:dev

Notes: md文件中使用非一級標題會在側邊欄生成多級錨點。

集成組件庫

配置主題

// docs/.vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import 'element-plus/lib/theme-chalk/index.css' // 組件依賴ElementPlus
import { FormRender } from 'custom-form'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    // app為createApp()創建的實例
    app.component(FormRender.name, FormRender)
  }
}

集成組件

創建路由docs/Forms/

.
├── Forms
│   └── index.md
├── Install
│   └── index.md
├── Intro
│   └── index.md
├── Quickstart
│   └── index.md
└── index.md

編寫文檔

<!-- docs/Forms/index.md -->
# 表單
用户通過配置`schema`渲染表單。

## 基本用法
<!-- 集成組件，vite自動解析，源代碼不會在頁面展示 -->
<div>
  <form-render
    :schema="schema"
    :value="{}"
  >
  </form-render>
</div>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { formSchema } from '../../examples/layouts/index.ts'

export default defineComponent({
  setup () {
    const schema = reactive(formSchema)
    return {
      schema
    }
  }
})
</script>

## 代碼示例
<!-- 源碼 -->
'''ts
<form-render
  :schema="schema"
  :value="{}"
>
</form-render>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { formSchema } from '../../examples/layouts/index.ts'

export default defineComponent({
  setup () {
    const schema = reactive(formSchema)
    return {
      schema
    }
  }
})
'''

https://github.com/vuejs/vite...

集成ElementPlus

// docs/.vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
// import { FormRender } from 'custom-form'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    // register global components
    app.use(ElementPlus)
    // app.component(FormRender.name, FormRender)
  }
}

<!-- docs/Forms/index.md -->
## 基本用法
<!-- 集成組件，vite自動解析，源代碼不會在頁面展示 -->
<div>
  <el-button type="primary" @click="alert">按鈕</el-button>
  <!-- <form-render
    :schema="schema"
    :value="{}"
  >
  </form-render> -->
</div>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
// import { formSchema } from '../../examples/layouts/index.ts'

export default defineComponent({
  setup () {
    // const schema = reactive(formSchema)
    function alert () {
      window.alert('1234')
    }
    return {
      // schema,
      alert
    }
  }
})
</script>