https://github.com/dishait/vite-plugin-global-api

vite 面向组件库的全局 api 的插件
https://github.com/dishait/vite-plugin-global-api

api component global vite

Last synced: 4 days ago
JSON representation

vite 面向组件库的全局 api 的插件

• Host: GitHub
• URL: https://github.com/dishait/vite-plugin-global-api
• Owner: dishait
• License: mit
• Created: 2022-03-16T08:52:30.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-28T08:32:54.000Z (9 months ago)
• Last Synced: 2024-11-08T00:06:14.139Z (10 days ago)
• Topics: api, component, global, vite
• Language: TypeScript
• Homepage:
• Size: 49.8 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-global-api

`vite` 面向组件库的全局 `api` 的插件




## Features 🦖

### naive-ui

- [dialog](https://www.naiveui.com/zh-CN/os-theme/components/dialog)

- [message](https://www.naiveui.com/zh-CN/os-theme/components/message)

- [notification](https://www.naiveui.com/zh-CN/os-theme/components/notification)




## Usage 🦕

1. 安装

```shell

npm i vite-plugin-global-api -D

```

2. 配置

```ts

// vite.config.js 或者 vite.config.js

import { defineConfig } from "vite"

import GlobalApi from "vite-plugin-global-api"

export default defineConfig({

    plugins: [GlobalApi()]

})

```

```ts

// main.js or main.ts

import App from './App.vue'

import { createApp } from 'vue'

import { useGlobalApi } from 'virtual:global-api'

const app = createApp(App)

useGlobalApi(app) // 获取 api

app.mount('#app')

```

3. 使用

```shell

npm i naive-ui

```

```ts

import { n } from 'virtual:global-api'

// n 为 naive-ui 的全局 api 实例

n.dialog.info({ title: 'Dialog' })

n.message.info('message')

n.notification.create({

    title: 'Notification'

})

```

注意 `naive-ui` 的全局 `api` 使用，必须在 `App.vue` 挂载之后。




### Type 🐃

如果你是 `ts` 项目，可以在 `tsconfig.json` 中添加如下配置以得到虚拟模块的类型声明

```json

{

    "compilerOptions": {

        "types": ["vite-plugin-global-api/client"]

    }

}

```







## License

Made with markthree

Published under [MIT License](./LICENSE).