+
Skip to content

cnpap/viteser

Repository files navigation

把接口当作函数写在前端项目中

banner.png

[ENGLISH] [中文]

// src/api.ts
import { useEffect, useState } from 'react'
import { db } from './db'

// src/App.tsx
import { getUser } from './api'

export async function getUser(id: number) {
  'use server'
  return db.query(`SELECT * FROM users WHERE id = ${id}`)
}

function App() {
  const [user, setUser] = useState<{
    id: number
    name: string
  }>({ id: 0, name: '' })
  useEffect(() => {
    getUser(1).then(setUser)
  }, [])
  return <div>{user.name}</div>
}

🏃🏻‍♂️‍➡️ 开始


  1. 安装 viteser 和其他依赖
npm install viteser
  1. 修改 vite.config.ts
import { defineConfig } from 'vite'
import { ViteserPlugin } from 'viteser'

// https://vitejs.dev/config/
// noinspection JSUnusedGlobalSymbols
export default defineConfig({
  plugins: [
    ViteserPlugin(),
    // react() or vue() or other . . .
  ],
})

🔍 快速启动

https://github.com/sia-fl/viteser-demo

📦 最佳实践(长期维护)

https://github.com/sia-fl/buess

About

Publish APIs as functions in your Vite project

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  
点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载