Shulou(Shulou.com)05/31 Report--

This article is a detailed introduction to "how to use Vue's new front-end construction tool Vite". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use Vue's new front-end construction tool Vite" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of the small editor.

Start with Vite

Let's take a look at Vite's official introduction.

It can be seen that Vite uses native ES modules when developing locally: modern browsers (such as the latest version of Google) no longer need to rely on webpack management modules, but can have module management capabilities like Nodejs, which is native ES module capabilities.

Therefore, when developing locally, Vite omits some time-consuming compilation process, and hot updates are naturally fast.

When building production artifacts, you can build modern browser artifacts, or you can export highly optimized static assets of the production environment through Rollup. -- To what extent this is highly optimized, we can discuss it in a later article.

get started

Vite is easy to use, just run npm create vite@latest command.

npm create is actually the npm init command, and the npm init command with the package name is npm exec, which is the default command for executing the vite package--initialization.

After entering the command, you need to add the project name and technology stack. You can see that there are several technology stacks to choose from (as shown below).

Vite supports six frameworks, half of which I don't recognize.

Vanilla JS is a fast, lightweight, cross-platform JavaScript framework. Vanilla JS is the lightest JavaScript framework in the world (one of the lightest)-it's actually native JS.

Vue/react: These two should not be introduced too much.

Preact: A lightweight alternative to React.

Lit: Lit is a simple library for building fast, lightweight Web components. (I took a look at the grammar and found it quite fun.)

svelte: A library that doesn't use Virtual DOM-cool. The author of this library and Rollup are the same person.

Here I chose vue + ts to create.

Now let's see what this new project directory looks like. (as shown below)

and directories initialized with vue-cli differ in two ways:

The index.html entry file has been moved to the root directory. The official explanation is that Vite was a server during development, and index.html was the entry file for the Vite project.

vite.config.ts replaces vue.config.js as the configuration file for the vite project.

Next, let's look at the contents of package.json. (as follows)

{ "name": "vite-try", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.2.25" }, "devDependencies": { "@vitejs/plugin-vue": "^2.0.0", "typescript": "^4.4.4", "vite": "^2.7.2", "vue-tsc": "^0.29.8" }}

As can be seen from the above, Vue projects initialized with Vite, Vue version is already the latest Vue3. Development dependencies also switched from the vue-cli/webpack family to the vite family.

startup project

Before you try Vue3's new syntax, get the project started and see how it works.

After installing dependencies using npm i, use npm run dev to start native development mode.

Just started the project, the speed of start-up really surprised me.

This is also much faster than Vue2 initialization project launch, just blink of an eye project has been launched.

Of course, we can tell from its introduction that this is because Vite uses native ES modules when developing locally, so there is no module compilation process involved during this period, saving a lot of time.

View locally running modules

Let's open the console and look at our html file first. (as shown below)

As you can see from this morning, main.ts is introduced into html, which is the entry file of our project. (as shown below)

As you can see from the image above, the code is still native import, without any translation.

But here I see the requested resource, ts and vue.

Does google browser already support direct ts and vue loading? No, the trick here comes from the file's response header, Content-Type, which determines how the browser handles the file. (as shown below)

If you click on another.vue file, you can see that the.vue file has been compiled into a browser-recognizable js type, but the module still uses the native ES module supported by Google Chrome. (as shown below)

Let's see what the page looks like. (as shown below)

emmmmm, classic Vue launch page.

Two words caught my attention:

The recommended IDE is vscode + volar.

Modify components/HelloWorld.vue to test the native hot update feature.

vscode + volar

Vscode is the code editor I've been using to write vue, but what's volar?

Check it out, it turns out to be a plug-in for vue3 syntax support in vscode, which can be used for intelligent syntax prompts and error checking. (as shown below)

Decisively install a wave. -- A shuttle for learning, a lot of stationery for poor students

As mentioned in the documentation, this plugin may conflict with vetur plugin. It is recommended to open only one of them. (Indeed), so in a workspace, open only one plug-in to avoid conflicts.

local thermal renewal

Next, I'll modify components/HelloWorld.vue to test the native hot update feature.

In fact, it felt like there was no need to try. The speed must be very fast.

After modifying the code, the hot update is completed in the moment of saving, almost imperceptible.

This also has something to do with the small size of the project. For larger projects, after modifying the code, the speed of hot updates needs to be verified again. build the project

Having experienced local development, let's try building a project and see what the product looks like.

Use the npm run build command to build your project. There's an error here. (as shown below)

I just initialized this project, how to build the first report wrong?

Here we can see that the error is an optional chain operator syntax error, think about it should be the node version problem. My local node version is v12.20.0. I looked it up in the official documentation and there is indeed a related problem record. (as shown below)

It seems that vue + ts template dependent node version needs to be higher, I will switch the node version to v14.15.0 here, run the build command again, it is successful! (as shown below)

The final build code is packaged by Rollup, which I haven't used yet, so check out his official introduction.

Here is mainly to understand the difference between rollover and webpack, rollover module packaging capabilities are not as strong as webpack, but the use of tree-shaking to fully process js files, packaged js files will be relatively "clean."

Then, we go into the dist directory and run the project using anywhere (a simple http server).

As can be seen from the above figure, the file packaged by vite, the entry js is directly blocking the DOM rendering thread. However, the files of these two JS are not large either, adding up to only 53k.

Of course, as the project gets bigger and bigger, the volume will also get bigger and bigger. Vite compatibility issues

When a new framework is launched, everyone is more concerned about its community activity, followed by its compatibility.

Let's see how compatible Vite packages are. (as shown below)

According to Vite official introduction, the code built by default configuration can only support modern browsers, that is, the following.

The configuration can be modified to support at least ES2015, which is ES6 (that is, IE does not support it).

But legacy browsers (like IE11) can be supported with a plug-in- @vitejs/plugin-legacy. However, IE 11 seems to be the limit, and lower versions may have problems.

So, if you're strict about browser compatibility, use Vite with caution.

Read here, this article "Vue's new front-end construction tool Vite how to use" article has been introduced, want to master the knowledge points of this article still need to practice to understand, if you want to know more related content articles, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.