Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vitjs/vit
🚀 React application framework inspired by UmiJS / 类 UmiJS 的 React 应用框架
https://github.com/vitjs/vit
mock-data react react-framework umi umijs vit vite vite-plugin vite-plugin-react vitjs
Last synced: 3 days ago
JSON representation
🚀 React application framework inspired by UmiJS / 类 UmiJS 的 React 应用框架
- Host: GitHub
- URL: https://github.com/vitjs/vit
- Owner: vitjs
- License: mit
- Created: 2021-03-24T15:10:19.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-09-24T04:41:15.000Z (about 2 years ago)
- Last Synced: 2024-12-09T17:56:59.446Z (14 days ago)
- Topics: mock-data, react, react-framework, umi, umijs, vit, vite, vite-plugin, vite-plugin-react, vitjs
- Language: TypeScript
- Homepage:
- Size: 543 KB
- Stars: 100
- Watchers: 3
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
English | [简体中文](./README.zh-CN.md)
# Vit 🚀
> React application framework inspired by UmiJS.
- ⚡️ Manually Defined Routing
- ✨ Routing-based Code Splitting
- 🎁 Exported Pure Static Application
- 🎨 Mock Data, Usable in the Production### Routing
The framework takes over route definition and rendering, application entry. Developers only focus on business development after configure the route definition.
### Mock Data
Based on [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock), Built-in interception for **fetch**, you can easily use mock data in the production environment to facilitate project preview.
## How to use?
### Install
```shell
# Vite plugin, Core function realization
$ yarn add @vitjs/vit --dev# Vit app runtime, provide application runtime related components
$ yarn add @vitjs/runtime
```### Config
```html
```
```ts
// vite.config.ts
import type { UserConfig } from 'vite';
import vitApp from '@vitjs/vit';const config: UserConfig = {
plugins: [
vitApp({
// Configure routing according to the project structure, and import components uniformly from the `src` directory
// icon currently supports automatic escaping as icons in [`@ant-design/icons`](https://ant.design/components/icon/#List-of-icons)
routes: [
{
path: '/',
component: './layouts/BasicLayout',
routes: [
{
path: '/',
redirect: '/welcome',
exact: true,
},
{
path: '/welcome',
icon: 'smile',
name: 'Welcome',
component: './pages/Welcome',
},
],
},
],
}),
],
};export default config;
``````js
// tsconfig.json
// For better TS type prompt, you need to add the following configuration
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@@/*": ["./src/.vit/*"]
}
}
}
```In addition, the plugin will generate runtime dependencies, so the `build` script of the application needs to remove the `tsc` command. In the end, add the directory `.vit` where the temporary files are located to `.gitignore`.
### Auto import
[`globalImports`](https://github.com/vitjs/vit/blob/master/packages/vit/src/types.ts#L9) lets you customize the files that need to be imported globally automatically. By default, you can see [`import.ts`](https://github.com/vitjs/vit/blob/master/packages/vit/src/generateFiles/import.ts#L2)
In particular, [`_app.tsx`](https://github.com/vitjs/vit/blob/master/packages/core/src/Service/index.ts#L21) can be automatically import to rewrite the application's rendering logic.
### Upgrade
```shell
$ yarn upgrade --scope @vitjs$ yarn upgrade --scope @vitjs --latest
```### Application Template
For more details, please refer directly to the application template **[yunsii/vite-react](https://github.com/yunsii/vite-react)**. It is worth noting that the current plugin is still under heavy development, API and usages are not set in stone yet.