Home >Web Front-end >Vue.js >Vite3.0 is released, take a look at the new features of Vite3.0

Vite3.0 is released, take a look at the new features of Vite3.0

青灯夜游
青灯夜游forward
2022-07-22 11:16:063787browse

Vite3 has released 3.0, are you still scrolling? The following article will take a look at the new features of Vite 3.0. The front-end is developing so fast now. Only by maintaining sensitivity to new technologies at all times can we ensure that we will not be eliminated.

Some time ago, Youda released Vite3.0 and updated the official documentation of Vite, as shown below

Vite3.0 is released, take a look at the new features of Vite3.0

Enter the homepage anyway. My feeling is just amazing.

This document will briefly introduce the new things in Vite3.0, so don’t get confused.

Changes in templates

As for myself, the Vue project I created most with Vite is the Vue project created with Vite after this update.Vue created using Vite The theme of the template is consistent with Vite's documentation. It also supports dark and light modes, and the icon has been changed from Vue's logo to Vite's logo.

We can use Vite to create a Vue template and run it to see the effect:

pnpm create vite
# project name -> demo
# select a framework -> vue
# select a variant -> vue
cd demo
pnpm install
pnpm dev
The two themes are as follows

Vite3.0 is released, take a look at the new features of Vite3.0

In addition to Vue, the themes of the following templates are also consistent.

Vite3.0 is released, take a look at the new features of Vite3.0

Optimization of Vite CLI

The style of Vite CLI in the command line has also been optimized, see the picture below

Vite3.0 is released, take a look at the new features of Vite3.0

The left is Vite3.0 and the right is Vite2.0. Visually, 3.0 is obviously better than 2.0.

In addition to the appearance, we can see that the

default port number has also changed, from 3000 to 5173; the Local address has changed from localhost 127.0.0.1.

Changes in import.meta.glob API

import.meta.globAPI can dynamically import files, allowed in Vite3import.meta.glob has been rewritten. For details, please refer to Glob import form, which is described in great detail in the official documentation.

Other contents

Vite3.0 has also updated some other contents, as follows:

  • The overall size of Vite has become smaller ;

  • The JS and CSS compression tools use ESbuild (starting in Vite2);

  • Fixed multiple bugs;

  • Compatibility has been adjusted,

    The minimum support is node14.18 ;

  • Vite decides

    to release a new version every year

Written at the end

This article briefly introduces some new features in Vite.

Now the speed of front-end development has become very fast.

Only by always maintaining sensitivity to new technologies can you ensure that you will not be eliminated, Come on everyone~

Finally, I wish you all: Don’t work overtime every day, and your annual salary will be over one million.

[Related video tutorial recommendations:

vuejs entry tutorial, web front-end entry]

The above is the detailed content of Vite3.0 is released, take a look at the new features of Vite3.0. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete