Hi everyone, like the title, today I’m going to show you something new Vue that Evan You just created ….. that’s Vue Vite
Introducing Vue Vite first
Vite is a test of vue that you can run a vue file (single-file component) without having to go through any bundle steps, it is directly imported by the browser ( native ES module imports ).
A little hard to imagine, right? Come to the example right away.
Before you begin, make sure you have installed nodejs
First create a component file named App.vue
As we all know, it is necessary to have a root element for our code to be rendered.
Continue to create a file named index.html at the same level as the App.vue file just now with the following content:
Open terminal and run npx vite command
Then open the browser and visit http://localhost:3000
Vite also supports hot-reload. You can edit the .vue file to see if it has hot-reload
You can also build production to make your app public (mini projects, for example).
Create package.json file with the following content:
Install vite: npm i vite -D
Build: npm run build then check if your source code has dist directory or not, that’s the source code has been built
Conclusion
You can also use the npx create-vite-app <project-name> command to create your project
Currently, Vite is still an experiment and is in the process of finishing hoping to experience something interesting from it soon.
You may already know: Vue is the view in french and Vite is fast in french
You can refer to and learn more here: https://github.com/vuejs/vite