foreword
vite is a brand new front-end construction tool. Since vite is a development server based on native ESM, it can bring users a lighter and faster development experience. This article will show you how to use vite to build a VUE project. After using it, you will know how fragrant it is~
Create a vue project
Open cmd and enter the directory where you want to create the project and
enter the command
npm init vite hello-vue3 -- --template vue
Then enter the command as prompted above
Open this address in the browser and
this page appears, which means that a vue3+vite project has been created. How is it much faster than using scaffolding cli?
Create other projects
Above we have exemplified the use of vite to create a vue3 project. We can also use vite to create projects of other frameworks. The instructions used are different.
Enter the instructions:
npm create vite@latest
Then you can see other options to choose from.
Of course, you can choose vue+ts to build
The difference between vite and vue-cli4
Vue-cli is built based on webpack and has some default preset configurations. Before the service starts, all code will be packaged into bundles, and then the service will be started and provided to the browser. Therefore, when vue-cli4 develops some large projects, The later the service starts, the slower it gets.
In order to solve the problem of slow server movement, vite uses ESbuild precompiled dependencies, which are many times faster than bundlers written in JS to build dependencies. To avoid rebuilding the entire package every time the project is started, Vite caches the prebuilt ones in node_modules/.vite.