Today, the editor will share with you the relevant knowledge points on how to use Vite, a more efficient construction tool for Vue. For reference, I hope you will gain something after reading this article. Let’s take a look at it together.
When we used Vue2 for development, we usually used our vue-cli scaffolding for projects The construction of the cli scaffolding is based on webpack for construction and packaging. As a code compilation tool, webpack has entry, exit, loader and plug-ins.
When webpack processes an application, it internally builds a dependency graph that maps to each module required by the project and generates one or more bundles.
We can see from the figure that Webpack can convert various static resources js, css, less, and sass into a static file, reducing page requests.
Why did you choose him?
webpack: The compilation process is to package and compile all dependencies through webpack and finally hand them over to the server for rendering, so the speed will be slower, after all, all dependencies are loaded Processing, so we will wait for the dependencies to load especially when we start the cli scaffolding project for the first time;
When we used vue-cli scaffolding before, we first installed the scaffolding globally so that we could create a Vue2 project later, and the Vite build tool does not require us to install it globally, we can use the following command to do it Created; note that Vite requires Node.js version 14.18+, 16+. However, some templates require a higher version of Node to run properly, please pay attention to upgrade your version of Node when your package manager warns you.
Create project command:
//use NPM:$ npm create vite@latest//use Yarn:$ yarn createvite//Use PNPM:$ pnpm create vite
Input file name, select front-end framework, select language:
Enter the project, install dependencies, start the project (compilation speed is very fast)
The project started successfully
Copyright Description：No reproduction without permission。
Knowledge sharing community for developers。
Let more developers benefit from it。
Help developers share knowledge through the Internet。