Here’s a short tutorial to get started with Vite:
- Install Node.js and npm if you haven’t already. You can download them from the official website: https://nodejs.org.
- Create a new directory for your project and open a terminal or command prompt in that directory.
- Run the following command to create a new package.json file:csharpCopy code
npm init -y - Install Vite as a development dependency by running the following command:cssCopy code
npm install vite --save-dev - Create an index.html file and add the following code:phpCopy code
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="./src/main.js"></script> </body> </html> - Create a src directory and add a main.js file with the following code:pythonCopy code
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); - Create an App.vue file in the src directory with the following code:phpCopy code
<template> <h1>Hello, world!</h1> </template> <script> export default { name: 'App' }; </script> - Start the development server by running the following command:Copy code
npx vite - Open your browser and go to http://localhost:3000 to see your app running.
Congratulations! You’ve just created a basic Vue.js app using Vite. From here, you can continue to build out your app by adding components, styles, and other features. Vite provides many helpful features, such as hot module replacement, which allows you to see changes to your code in real time. You can learn more about Vite by reading the documentation on the official website: https://vitejs.dev/.