YouTip

Vite is a modern front-end build tool designed to provide a fast development experience by leveraging native ES module support in modern browsers. Vite consists of two parts: * **Development server:** Based on native ES modules, providing ultra-fast hot updates. * **Build command:** Uses Rollup to bundle code and generate optimized static resources for production environments. > Vite requires Node.js version 18+ or 20+. However, some templates may require higher Node versions to run properly. Please note to upgrade your Node version when your package manager issues a warning. !(#) ### Pain Points of Traditional Build Tools Before Vite appeared, front-end development typically used build tools like Webpack. Although these tools are powerful, they also have some pain points: * **Slow startup:** The larger the project, the longer the startup time, affecting development efficiency. * **Slow hot updates:** Every time code is modified, the entire project needs to be rebuilt, resulting in slow hot update speeds. * **Complex configuration:** Tools like Webpack have complex configurations with high learning costs. The emergence of Vite solved the pain points of traditional build tools and has the following advantages: * **Extremely fast startup:** Leverages browser native ES module support, no bundling required, extremely fast startup. * **Fast hot updates:** Only updates modified modules, preserving application state and improving development efficiency. * **Rich features:** Supports TypeScript, JSX, CSS, and more, out of the box. * **Highly extensible:** Through the plugin system, easily integrate other tools and frameworks. ### How Vite Works Vite's working principle can be divided into development mode and production mode: * **Development mode:** * Vite starts a development server, leveraging the browser's native support for ES modules to directly load source code. * When code changes, Vite only updates the modified modules and notifies the browser for hot updates, preserving the application state. * **Production mode:** * Vite uses Rollup to bundle code and generate optimized static resource files. * These files can be deployed to any static file server. ### Vite Use Cases Vite is suitable for various projects, especially for: * **Single Page Applications (SPA):** Such as Vue, React projects. * **Static websites:** Quickly build blogs, documentation, etc. * **Library development:** Use Vite's build functions to efficiently develop and package libraries. * * * ## Creating a Vite Project Vite provides multiple ways to create a new project, the simplest being using the command line tool. Open your terminal or command line tool and run the following command to create a new Vite project: npm create vite@latest Follow the prompts to enter the project name and select a template. Vite provides multiple templates, including: * **vanilla:** Pure JavaScript project * **vue:** Vue.js project * **react:** React project * **preact:** Preact project * **lit:** Lit project * **svelte:** Svelte project !(#) After selecting a template, Vite will automatically create the project directory and install dependencies. In this chapter, we selected the Vue framework. If you're not sure how to choose, you can just press Enter all the way. The window output information will be similar to: !(#) Projects created with Vite typically contain the following files and folders: !(#) * **node_modules:** Folder for storing project dependencies. * **public:** Folder for storing static resources such as images, fonts, etc. * **src:** Folder for storing project source code. * **main.js:** Project entry file. * **App.vue:** Vue project root component. * **index.html:** Project homepage. * **package.json:** Project configuration file, containing project information, dependencies, and script commands. * **vite.config.js:** Vite configuration file, used to configure various Vite options. ### Starting the Development Server Enter the project directory: cd tutorial-vite-test Install dependencies: npm install Run the following command to start the development server: npm run dev After execution, you will see the following information: VITE v6.2.0 ready in 684 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window ➜ Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools ➜ press h + enter to show help Vite will start a local development server and print the access address, such as http://localhost:5173. The port can be configured and modified in vite.config.js. Open your browser to visit this address, and you can see your Vite project. !(#) ### Modifying Code and Viewing Effects Open the src/App.vue file, modify the code, and save the file. !(#) You will notice that the browser will automatically refresh and display the modified effects. !(#) * * * ## Vite Startup Process Defined in package.json: "scripts": { "dev": "vite"} After executing the npm run dev command, npm will find the local node_modules/.bin/vite executable file and call this file to start the development server. The core steps of Vite's startup process: 1. **Read Configuration** * By default, reads `vite.config.js` or `