Vite Plugin React Pages 使用教程
vite-plugin-react-pages A vite framework for building react app. Especially suitable for document site and demos/playgrounds of react components. 项目地址:https://gitcode.com/gh_mirrors/vi/vite-plugin-react-pages
1. 项目的目录结构及介绍
vite-plugin-react-pages/
├── README.md
├── package.json
├── src/
│ ├── client/
│ │ ├── App.tsx
│ │ ├── index.tsx
│ ├── server/
│ │ ├── index.ts
│ ├── shared/
│ │ ├── constants.ts
├── vite.config.ts
README.md : 项目介绍和使用说明。package.json : 项目依赖和脚本配置。src/ : 源代码目录。
client/ : 客户端代码,包含React应用的入口文件。server/ : 服务器端代码,包含Vite服务器的入口文件。shared/ : 客户端和服务器端共享的代码。 vite.config.ts : Vite配置文件。
2. 项目的启动文件介绍
客户端启动文件
src/client/index.tsx : 客户端的入口文件,负责渲染React应用。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
服务器端启动文件
src/server/index.ts : 服务器端的入口文件,负责启动Vite服务器。
import { createServer } from 'vite';
async function startServer() {
const server = await createServer({
configFile: './vite.config.ts',
});
await server.listen();
server.printUrls();
}
startServer();
3. 项目的配置文件介绍
vite.config.ts : Vite的配置文件,包含项目的构建和开发服务器配置。
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
build: {
outDir: 'dist',
},
});
plugins : 配置使用的插件,这里使用了@vitejs/plugin-react
插件来支持React。server : 配置开发服务器的端口。build : 配置构建输出目录。
vite-plugin-react-pages A vite framework for building react app. Especially suitable for document site and demos/playgrounds of react components. 项目地址:https://gitcode.com/gh_mirrors/vi/vite-plugin-react-pages