@uni-helper/vite-plugin-uni-components

从unplugin-vue-components派生并修改以适应UniApp。

安装

1pnpm i -D @uni-helper/vite-plugin-uni-components

使用

1// vite.config.ts
2import { defineConfig } from 'vite'
3import Uni from '@dcloudio/vite-plugin-uni'
4import Components from '@uni-helper/vite-plugin-uni-components'
5
6export default defineConfig({
7  plugins: [
8    // make sure put it before `Uni()`
9    Components(),
10    Uni(),
11  ],
12})

从 UI 库导入

支持的 UI 库：

• Ano UI
• uni-ui
• wot-design-uni
• uv-uni

UI 组件类型提示

如果你使用 pnpm ，请在根目录下创建一个 .npmrc 文件，参见issue。

// .npmrc
public-hoist-pattern[]=@vue*
// or
// shamefully-hoist = true

更多信息请查看unplugin-vue-components

[!TIP] 对于第三方组件(如 dcloudio/uni-ui，ano-ui) 使用 vite-plugin-uni-components 会生成 default 属性，解决在 H5 端无法正确处理组件的问题。

1declare module 'vue' {
2 export interface GlobalComponents {
3-  AButton: typeof import('ano-ui/components/AButton/AButton.vue')['AButton']
4+  AButton: typeof import('ano-ui/components/AButton/AButton.vue')['default']
5   Book: typeof import('./src/components/book/index.vue')['default']
6   ComponentA: typeof import('./src/components/ComponentA.vue')['default']
7-  UniCalendar: typeof import('@dcloudio/uni-ui/lib/uni-calendar/uni-calendar.vue')['UniCalendar']
8+  UniCalendar: typeof import('@dcloudio/uni-ui/lib/uni-calendar/uni-calendar.vue')['default']
9 }
10}

License

MIT License © 2023-PRESENT Neil Lee