mirror of https://github.com/YunYouJun/valaxy
docs: add how to custom @vitejs/plugin-vue, close #339
This commit is contained in:
parent
59a8098cd9
commit
5220d589d5
|
|
@ -20,9 +20,9 @@
|
|||
"valaxy-theme-press": "link:../packages/valaxy-theme-press"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/simple-icons": "^1.1.89",
|
||||
"@iconify-json/simple-icons": "^1.1.90",
|
||||
"nodemon": "^3.0.3",
|
||||
"vite": "^5.0.12",
|
||||
"vitepress": "1.0.0-rc.40"
|
||||
"vitepress": "1.0.0-rc.41"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,51 +9,7 @@ categories:
|
|||
|
||||
> [packages/valaxy/node/type.ts](https://github.com/YunYouJun/valaxy/blob/main/packages/valaxy/node/types.ts)
|
||||
|
||||
```ts
|
||||
// types
|
||||
export interface ValaxyExtendConfig {
|
||||
/**
|
||||
* Markdown Feature
|
||||
*/
|
||||
features: {
|
||||
/**
|
||||
* enable katex for global
|
||||
*/
|
||||
katex: boolean
|
||||
}
|
||||
|
||||
vite?: ViteUserConfig
|
||||
vue?: Parameters<typeof Vue>[0]
|
||||
components?: Parameters<typeof Components>[0]
|
||||
unocss?: UnoCSSConfig
|
||||
/**
|
||||
* unocss presets
|
||||
*/
|
||||
unocssPresets?: {
|
||||
uno?: Parameters<typeof presetUno>[0]
|
||||
attributify?: Parameters<typeof presetAttributify>[0]
|
||||
icons?: Parameters<typeof presetIcons>[0]
|
||||
typography?: Parameters<typeof presetTypography>[0]
|
||||
}
|
||||
pages?: Parameters<typeof Pages>[0]
|
||||
/**
|
||||
* for markdown
|
||||
*/
|
||||
markdown?: MarkdownOptions
|
||||
extendMd?: (ctx: {
|
||||
route: {
|
||||
meta: { frontmatter: Record<string, any>, layout?: string } & object
|
||||
path: string
|
||||
component: string
|
||||
}
|
||||
data: Readonly<Record<string, any>>
|
||||
content: string
|
||||
excerpt?: string
|
||||
path: string
|
||||
}) => void
|
||||
addons?: ValaxyAddons
|
||||
}
|
||||
```
|
||||
<<< @/../packages/valaxy/node/types.ts
|
||||
|
||||
::: zh-CN
|
||||
所以，你可以像这样使用：
|
||||
|
|
@ -101,6 +57,25 @@ export default defineValaxyConfig<ThemeConfig>({
|
|||
})
|
||||
```
|
||||
|
||||
### @vitejs/plugin-vue
|
||||
|
||||
Valaxy 默认集成了 [`@vitejs/plugin-vue`](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue) 插件，你可以通过 `vue` 配置项进行配置。
|
||||
|
||||
```ts
|
||||
// valaxy.config.ts
|
||||
import { defineValaxyConfig } from 'valaxy'
|
||||
|
||||
export default defineValaxyConfig({
|
||||
vue: {
|
||||
template: {
|
||||
compilerOptions: {
|
||||
isCustomElement: tag => tag.startsWith('my-')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Unocss Presets
|
||||
|
||||
我们默认集成了 [UnoCSS](https://unocss.dev) 及以下预设。
|
||||
|
|
|
|||
|
|
@ -46,7 +46,15 @@ export default defineAppSetup(({ router, isClient }) => {
|
|||
|
||||
## 使用 Vue 插件
|
||||
|
||||
如使用 Element Plus，你可以在 `setup/main.ts` 中添加以下配置：
|
||||
::: tip
|
||||
|
||||
Valaxy 默认集成了 [`@vitejs/plugin-vue`](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue) 插件，如果你自定义插件 `@vitejs/plugin-vue` 的配置，你可以通过 `vue` 配置项进行配置。
|
||||
|
||||
可参见 [扩展配置](/guide/config/extend.md#vitejs-plugin-vue)。
|
||||
|
||||
:::
|
||||
|
||||
譬如使用 Element Plus，你可以在 `setup/main.ts` 中添加以下配置：
|
||||
|
||||
```ts
|
||||
import { defineAppSetup } from 'valaxy'
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ pnpm create valaxy
|
|||
- `index.ts`: 主题的 Composition API 入口文件
|
||||
- `post.ts`: 主题的文章相关的辅助函数
|
||||
- `docs`: 主题的文档（自由用你喜欢的结构组织并展示吧！）
|
||||
> 处于定制化与 [DogFooding](https://zh.wikipedia.org/zh-sg/%E5%90%83%E8%87%AA%E5%B7%B1%E7%9A%84%E7%8B%97%E7%B2%AE) 的考虑，Valaxy 的文档采用自身制作，并制作了一个文档主题 [valaxy-theme-press](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-theme-press)，如果你只是想要一个简单轻量的文档站点，[Vitepress](https://vitepress.vuejs.org/) 是个不错的选择。（[valaxy-theme-starter](https://github.com/valaxyjs/valaxy-theme-starter) 在未来也许会内置该示例模版。）
|
||||
> 出于定制化与 [DogFooding](https://zh.wikipedia.org/zh-sg/%E5%90%83%E8%87%AA%E5%B7%B1%E7%9A%84%E7%8B%97%E7%B2%AE) 的考虑，Valaxy 的文档采用自身制作，并制作了一个文档主题 [valaxy-theme-press](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-theme-press)，如果你只是想要一个简单轻量的文档站点，[Vitepress](https://vitepress.vuejs.org/) 是个不错的选择。（[valaxy-theme-starter](https://github.com/valaxyjs/valaxy-theme-starter) 在未来也许会内置该示例模版。）
|
||||
- `en-US`: 英文文档
|
||||
- `zh-CN`: 中文文档
|
||||
- `features`: 主题特色功能，一些不依赖于 Vue Composition API 的功能（区别于 `composables`）
|
||||
|
|
@ -420,6 +420,8 @@ Valaxy 决定通过插件中心化地提供各类封装好的评论组件和辅
|
|||
|
||||
## FAQ
|
||||
|
||||
### 提醒特殊需求的用户安装第三方插件
|
||||
|
||||
如果您的主题适配了多个 Addon（如 `valaxy-addon-waline`/`valaxy-addon-twikoo`），但用户并非都需要安装。
|
||||
当用户没有主动安装对应 addon 时（即 addon 不存在的情况），则会默认重定向至一个空函数。
|
||||
|
||||
|
|
|
|||
12
package.json
12
package.json
|
|
@ -3,7 +3,7 @@
|
|||
"type": "module",
|
||||
"version": "0.17.3",
|
||||
"private": true,
|
||||
"packageManager": "pnpm@8.14.3",
|
||||
"packageManager": "pnpm@8.15.1",
|
||||
"description": "📄 Vite & Vue powered static blog generator.",
|
||||
"author": {
|
||||
"email": "me@yunyoujun.cn",
|
||||
|
|
@ -65,22 +65,22 @@
|
|||
"@types/markdown-it-attrs": "^4.1.3",
|
||||
"@types/markdown-it-container": "^2.0.9",
|
||||
"@types/markdown-it-emoji": "^2.0.4",
|
||||
"@types/node": "^20.11.7",
|
||||
"@types/node": "^20.11.16",
|
||||
"@types/prompts": "^2.4.9",
|
||||
"@types/resolve": "^1.20.6",
|
||||
"@valaxyjs/devtools": "workspace:*",
|
||||
"bumpp": "^9.3.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"cypress": "^13.6.3",
|
||||
"cypress": "^13.6.4",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-plugin-cypress": "^2.15.1",
|
||||
"https-localhost": "^4.7.1",
|
||||
"husky": "^9.0.6",
|
||||
"lint-staged": "^15.2.0",
|
||||
"husky": "^9.0.10",
|
||||
"lint-staged": "^15.2.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prompts": "^2.4.2",
|
||||
"rimraf": "^5.0.5",
|
||||
"stylelint": "^16.2.0",
|
||||
"stylelint": "^16.2.1",
|
||||
"stylelint-config-recommended-vue": "^1.5.0",
|
||||
"stylelint-config-standard-scss": "^13.0.0",
|
||||
"tsup": "^8.0.1",
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@
|
|||
"module": "index.ts",
|
||||
"dependencies": {
|
||||
"@explosions/fireworks": "^0.0.2",
|
||||
"@iconify-json/ant-design": "^1.1.14",
|
||||
"@iconify-json/simple-icons": "^1.1.89",
|
||||
"@iconify-json/ant-design": "^1.1.15",
|
||||
"@iconify-json/simple-icons": "^1.1.90",
|
||||
"animejs": "^3.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -68,6 +68,10 @@ export interface ValaxyExtendConfig {
|
|||
}
|
||||
|
||||
vite?: ViteUserConfig
|
||||
/**
|
||||
* @vitejs/plugin-vue options
|
||||
* @see https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/README.md
|
||||
*/
|
||||
vue?: Parameters<typeof Vue>[0]
|
||||
// unplugin
|
||||
components?: Parameters<typeof Components>[0]
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
"@unhead/vue": "^1.8.10",
|
||||
"@valaxyjs/devtools": "workspace:*",
|
||||
"@vitejs/plugin-vue": "^5.0.3",
|
||||
"@vue/devtools-api": "^7.0.13",
|
||||
"@vue/devtools-api": "^7.0.14",
|
||||
"@vueuse/core": "^10.7.2",
|
||||
"@vueuse/integrations": "^10.7.2",
|
||||
"body-scroll-lock": "4.0.0-beta.0",
|
||||
|
|
@ -122,12 +122,12 @@
|
|||
"unplugin-vue-router": "^0.7.0",
|
||||
"vanilla-lazyload": "^17.8.5",
|
||||
"vite": "^5.0.12",
|
||||
"vite-plugin-vue-devtools": "^7.0.13",
|
||||
"vite-plugin-vue-devtools": "^7.0.14",
|
||||
"vite-plugin-vue-layouts": "0.11.0",
|
||||
"vite-ssg": "0.23.6",
|
||||
"vite-ssg-sitemap": "0.6.1",
|
||||
"vue": "^3.4.15",
|
||||
"vue-i18n": "^9.9.0",
|
||||
"vue-i18n": "^9.9.1",
|
||||
"vue-router": "^4.2.5",
|
||||
"yargs": "^17.7.2"
|
||||
},
|
||||
|
|
|
|||
429
pnpm-lock.yaml
429
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue