提交 7759d54c 编写于 作者: U ULIVZ

docs: declare that `themePath/index.js` is required

When you want to publish your theme as an npm package, make sure the package has `index.js`, and set
`"main"` field at `package.json` to `index.js` so that VuePress can resolve and get the correct
themePath.
上级 8b56f986
......@@ -28,7 +28,7 @@ Just one `Layout.vue` might not be enough, and you might also want to define mor
So it's time to reorganize your theme, an agreed theme directory structure is as follows:
::: vue
theme
themePath
├── `global-components` _(**Optional**)_
│ └── xxx.vue
├── `components` _(**Optional**)_
......@@ -42,7 +42,7 @@ theme
├── `templates` _(**Optional**)_
│   ├── dev.html
│   └── ssr.html
├── `index.js` _(**Optional**)_
├── `index.js` _(**Only required when you publish it as an npm package**)_
├── `enhanceApp.js` _(**Optional**)_
└── package.json
:::
......@@ -56,7 +56,17 @@ theme
- `theme/enhanceApp.js`: Theme level enhancements.
::: warning Note
Considering backward compatibility, Vue components located at theme root directory will also be automatically registered as layout components. But the recommended is placing them under `layouts` directory, which looks more clearer.
1. Considering backward compatibility, Vue components located at [themePath](../miscellaneous/glossary.md#theme-side) will also be automatically registered as layout components. But the recommended is placing them under `themePath/layouts` directory, which looks more clearer.
2. When you want to publish your theme as an npm package, make sure the package has `index.js`, and set `"main"` field at `package.json` to `index.js` so that VuePress can resolve and get the correct [themePath](../miscellaneous/glossary.md#theme-side).
```json
{
...
"main": "index.js"
...
}
```
:::
### Layout Component
......
......@@ -4,7 +4,7 @@ sidebar: auto
# Plugins
> To be translated soon.
> Translation are welcome!
## Writing a Plugin
......
......@@ -4,6 +4,8 @@ sidebar: auto
# Theme
> Translation are welcome!
::: tip
Theme components are subject to the same [browser API access restrictions](../guide/using-vue.md#browser-api-access-restrictions).
:::
......@@ -28,7 +30,7 @@ Just one `Layout.vue` might not be enough, and you might also want to define mor
So it's time to reorganize your theme, an agreed theme directory structure is as follows:
::: vue
theme
themePath
├── `global-components` _(**Optional**)_
│ └── xxx.vue
├── `components` _(**Optional**)_
......@@ -42,7 +44,7 @@ theme
├── `templates` _(**Optional**)_
│   ├── dev.html
│   └── ssr.html
├── `index.js` _(**Optional**)_
├── `index.js` _(**Only required when you publish it as an npm package**)_
├── `enhanceApp.js` _(**Optional**)_
└── package.json
:::
......@@ -50,13 +52,23 @@ theme
- `theme/global-components`: Components under this directory will be automatically registered as global components. For details, please refer to [@vuepress/plugin-register-components](https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/plugin-register-components).
- `theme/components`: Your components.
- `theme/layouts`: Layout components of the theme, where `Layout.vue` is required.
- `theme/styles`: Global style and palette.
- `theme/styles`: Global style and palette.
- `theme/templates`: Modify default template.
- `theme/index.js`: Entry file of theme configuration.
- `theme/enhanceApp.js`: Theme level enhancements.
::: warning Note
Considering backward compatibility, Vue components located at theme root directory will also be automatically registered as layout components. But the recommended is placing them under `layouts` directory, which looks more clearer.
1. Considering backward compatibility, Vue components located at [themePath](../miscellaneous/glossary.md#theme-side) will also be automatically registered as layout components. But the recommended is placing them under `themePath/layouts` directory, which looks more clearer.
2. When you want to publish your theme as an npm package, make sure the package has `index.js`, and set `"main"` field at `package.json` to `index.js` so that VuePress can resolve and get the correct [themePath](../miscellaneous/glossary.md#theme-side).
```json
{
...
"main": "index.js"
...
}
```
:::
### Layout Component
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册