Vite és un servidor de desenvolupament i una eina de compilació.
Introducció
Vite és una eina de construcció que té com a objectiu proporcionar una experiència de desenvolupament més ràpida i lleugera per a projectes web moderns. Consta de dues parts principals:
-
Un servidor de desenvolupament que proporciona millores amb funcionalitats enriquides sobre mòduls ES natius, per exemple, Reemplaçament de Mòduls en Calent (HMR) extremadament ràpid.
-
Un build command que empaqueta el teu codi amb Rollup, preconfigurada per generar assets estàtics altament optimitzats per a producció.
Crea el teu primer projecte amb React
Cloudlfare
Create a new React SPA using the create-cloudflare CLI:
> bun create cloudflare@latest vite-mongo -- --framework=react --platform=workers
This command runs create-vite
and then makes the necessary changes to incorporate the Cloudflare Vite plugin.
Seleccciona:
- category: Framework Starter
- framework: React
- variant: TypeScript + SWC
- git: No
Hello, World!
Puedes crear un proyecto:
bun create vite
¡Y a continuación sigue las instrucciones!
Otra opción es especificar directamente el nombre del proyecto y la plantilla que deseas usar,
Por ejemplo, para montar un proyecto de Vite + Reac, ejecuta:
bun create vite tsx --template react-swc-ts
Tailwind
Instala tailwindcss:
bun add -d tailwindcss @tailwindcss/vite
Añade el complemento @tailwindcss/vite
a tu configuración de Vite.
vite.config.js
import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
})
Agrega un @import
al archivo index.css
que importe Tailwind CSS.
@import "tailwindcss";
Ejecute su proceso de compilación con npm run dev
bun run dev
Comienza a usar las clases de utilidad de Tailwind para darle estilo a tu contenido:
App.tsx
export default function App() {
return (
<div className="flex h-screen">
<header className="m-auto">
<p className="text-2xl underline underline-offset-8 font-['Menlo']
hover:underline-offset-4 hover:text-3xl hover:border-red-500
hover:border-4 hover:p-4 hover:cursor-pointer">
David de Mingo
</p>
</header>
</div>
);
}