Skip to content

Commit f83489a

Browse files
WeilinerLWeilinerL
committed
docs: ✏️ update
1 parent cea7829 commit f83489a

File tree

2 files changed

+62
-66
lines changed

2 files changed

+62
-66
lines changed

‎packages/website/template/docs/guide/intro.md

+31-33
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,27 @@ npm install @mpxjs/vuese-website -g
1515

1616
假设你所在的目录为基于组件库搭建的`example`目录，这个目录主要是为了演示组件库组件的用法，启动后的效果如右边模拟器所示。👉
1717

18-
在`example`目录下新建`website.js`，并写入以下内容：
18+
在`example`平级目录下新建`website`文件夹，添加package.json文件：
19+
```json
20+
{
21+
"name": "website",
22+
"version": "1.0.0",
23+
"dependencies": {
24+
"vue": "^3.0.0",
25+
"vitepress": "^1.2.3"
26+
}
27+
}
28+
29+
```
30+
31+
在`website`文件夹下新建`website.js`文件，并写入以下内容：
1932
```javascript
2033
const path = require('path')
2134
const website = require('@mpxjs/vuese-website').default
2235

2336
website({
2437
srcDirPath: path.resolve(__dirname, '组件库src目录下的components目录'),
25-
exampleDirPath: path.resolve(__dirname, './pages'),
38+
exampleDirPath: path.resolve(__dirname, 'example目录下的pages目录'),
2639
outputPath: path.resolve(__dirname, './docs/components'),
2740
doscPath: path.resolve(__dirname, './docs'),
2841
})
@@ -44,38 +57,13 @@ src/components
4457
example/pages
4558
├── button
4659
| ├── README.md
47-
| ├── btn-bolder.mpx
48-
| ├── btn-choose-avatar.mpx
49-
| ├── btn-contact.mpx
50-
| ├── btn-disabled.mpx
51-
| ├── btn-follow-lifestyle.mpx
52-
| ├── btn-get-phone-number.mpx
53-
| ├── btn-get-user-info.mpx
5460
| ├── btn-icon.mpx
55-
| ├── btn-inline-icon.mpx
56-
| ├── btn-inline-outline.mpx
57-
| ├── btn-inline-primary.mpx
5861
| ├── btn-inline.mpx
59-
| ├── btn-launch-app.mpx
60-
| ├── btn-light-active.mpx
61-
| ├── btn-light-disabled.mpx
6262
| ├── btn-light.mpx
6363
| ├── btn-loading.mpx
64-
| ├── btn-open-setting.mpx
65-
| ├── btn-outline-active.mpx
66-
| ├── btn-outline-disabled.mpx
67-
| ├── btn-outline-loading.mpx
68-
| ├── btn-outline-primary-active.mpx
69-
| ├── btn-outline-primary-disabled.mpx
70-
| ├── btn-outline-primary.mpx
7164
| ├── btn-outline.mpx
72-
| ├── btn-primary-active.mpx
73-
| ├── btn-primary-disabled.mpx
7465
| ├── btn-primary.mpx
75-
| ├── btn-secondary-active.mpx
7666
| ├── btn-secondary.mpx
77-
| ├── btn-share.mpx
78-
| ├── btn-with-tip.mpx
7967
| └── index.mpx
8068
├── button-group
8169
| ├── README.md
@@ -88,14 +76,24 @@ example/pages
8876
└── index.ts
8977
```
9078

79+
假设你的项目为`monorepo`，此时的目录结构为：
80+
```plaintext
81+
monorepo
82+
├── mpx-cube-ui // 换成你的组件库
83+
├── example
84+
└── website
85+
├── website.js
86+
└── package.json
87+
```
88+
9189
### 文档生成
9290

93-
文档由[vitepress](https://vitepress.dev/zh/guide/what-is-vitepress)驱动，需要在`example`目录中安装对应的依赖：
91+
文档由[vitepress](https://vitepress.dev/zh/guide/what-is-vitepress)驱动，需要在`website`目录中安装对应的依赖：
9492
```bash
95-
npm install vitepress@^1.2.3
93+
npm install vitepress@^1.2.3 vue@^3.0.0
9694
```
9795

98-
然后在`example`目录下执行以下命令：
96+
然后在`website`目录下执行以下命令：
9997

10098
```bash
10199
vuese-website
@@ -117,7 +115,7 @@ docs
117115
└── index.md
118116
```
119117

120-
在`example`的`package.json`中添加一条命令：
118+
在`website`的`package.json`中添加一条命令：
121119
```diff
122120
+ "serve:doc": "node website.js"
123121
```
@@ -145,7 +143,7 @@ iframeConfig: {
145143
}
146144
```
147145

148-
**注意：这里的端口要和你的`example`项目`vue.config.js`中配置的端口号一致**
146+
**注意：这里的端口要和你的`example`项目中的`vue.config.js`文件中配置的端口号一致**
149147
```javascript
150148
devServer: {
151149
port: 8090
@@ -173,7 +171,7 @@ export const syncPathToChild: (to: string) => void;
173171
}
174172
```
175173

176-
你需要在项目的`app.ts`中，监听主窗口路由的变化：
174+
你需要在`example`项目的`app.ts`中，监听主窗口路由的变化：
177175
```typescript
178176
import mpx, { createApp } from '@mpxjs/core'
179177
import { onPathchange } from '@mpxjs/vuese-website/dist/iframe-sync'

‎website/docs/guide/intro.md

+31-33
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,27 @@ npm install @mpxjs/vuese-website -g
1515

1616
假设你所在的目录为基于组件库搭建的`example`目录，这个目录主要是为了演示组件库组件的用法，启动后的效果如右边模拟器所示。👉
1717

18-
在`example`目录下新建`website.js`，并写入以下内容：
18+
在`example`平级目录下新建`website`文件夹，添加package.json文件：
19+
```json
20+
{
21+
"name": "website",
22+
"version": "1.0.0",
23+
"dependencies": {
24+
"vue": "^3.0.0",
25+
"vitepress": "^1.2.3"
26+
}
27+
}
28+
29+
```
30+
31+
在`website`文件夹下新建`website.js`文件，并写入以下内容：
1932
```javascript
2033
const path = require('path')
2134
const website = require('@mpxjs/vuese-website').default
2235

2336
website({
2437
srcDirPath: path.resolve(__dirname, '组件库src目录下的components目录'),
25-
exampleDirPath: path.resolve(__dirname, './pages'),
38+
exampleDirPath: path.resolve(__dirname, 'example目录下的pages目录'),
2639
outputPath: path.resolve(__dirname, './docs/components'),
2740
doscPath: path.resolve(__dirname, './docs'),
2841
})
@@ -44,38 +57,13 @@ src/components
4457
example/pages
4558
├── button
4659
| ├── README.md
47-
| ├── btn-bolder.mpx
48-
| ├── btn-choose-avatar.mpx
49-
| ├── btn-contact.mpx
50-
| ├── btn-disabled.mpx
51-
| ├── btn-follow-lifestyle.mpx
52-
| ├── btn-get-phone-number.mpx
53-
| ├── btn-get-user-info.mpx
5460
| ├── btn-icon.mpx
55-
| ├── btn-inline-icon.mpx
56-
| ├── btn-inline-outline.mpx
57-
| ├── btn-inline-primary.mpx
5861
| ├── btn-inline.mpx
59-
| ├── btn-launch-app.mpx
60-
| ├── btn-light-active.mpx
61-
| ├── btn-light-disabled.mpx
6262
| ├── btn-light.mpx
6363
| ├── btn-loading.mpx
64-
| ├── btn-open-setting.mpx
65-
| ├── btn-outline-active.mpx
66-
| ├── btn-outline-disabled.mpx
67-
| ├── btn-outline-loading.mpx
68-
| ├── btn-outline-primary-active.mpx
69-
| ├── btn-outline-primary-disabled.mpx
70-
| ├── btn-outline-primary.mpx
7164
| ├── btn-outline.mpx
72-
| ├── btn-primary-active.mpx
73-
| ├── btn-primary-disabled.mpx
7465
| ├── btn-primary.mpx
75-
| ├── btn-secondary-active.mpx
7666
| ├── btn-secondary.mpx
77-
| ├── btn-share.mpx
78-
| ├── btn-with-tip.mpx
7967
| └── index.mpx
8068
├── button-group
8169
| ├── README.md
@@ -88,14 +76,24 @@ example/pages
8876
└── index.ts
8977
```
9078

79+
假设你的项目为`monorepo`，此时的目录结构为：
80+
```plaintext
81+
monorepo
82+
├── mpx-cube-ui // 换成你的组件库
83+
├── example
84+
└── website
85+
├── website.js
86+
└── package.json
87+
```
88+
9189
### 文档生成
9290

93-
文档由[vitepress](https://vitepress.dev/zh/guide/what-is-vitepress)驱动，需要在`example`目录中安装对应的依赖：
91+
文档由[vitepress](https://vitepress.dev/zh/guide/what-is-vitepress)驱动，需要在`website`目录中安装对应的依赖：
9492
```bash
95-
npm install vitepress@^1.2.3
93+
npm install vitepress@^1.2.3 vue@^3.0.0
9694
```
9795

98-
然后在`example`目录下执行以下命令：
96+
然后在`website`目录下执行以下命令：
9997

10098
```bash
10199
vuese-website
@@ -117,7 +115,7 @@ docs
117115
└── index.md
118116
```
119117

120-
在`example`的`package.json`中添加一条命令：
118+
在`website`的`package.json`中添加一条命令：
121119
```diff
122120
+ "serve:doc": "node website.js"
123121
```
@@ -145,7 +143,7 @@ iframeConfig: {
145143
}
146144
```
147145

148-
**注意：这里的端口要和你的`example`项目`vue.config.js`中配置的端口号一致**
146+
**注意：这里的端口要和你的`example`项目中的`vue.config.js`文件中配置的端口号一致**
149147
```javascript
150148
devServer: {
151149
port: 8090
@@ -173,7 +171,7 @@ export const syncPathToChild: (to: string) => void;
173171
}
174172
```
175173

176-
你需要在项目的`app.ts`中，监听主窗口路由的变化：
174+
你需要在`example`项目的`app.ts`中，监听主窗口路由的变化：
177175
```typescript
178176
import mpx, { createApp } from '@mpxjs/core'
179177
import { onPathchange } from '@mpxjs/vuese-website/dist/iframe-sync'

0 commit comments

Comments
 (0)