Make writing a habit together! This is the 9th day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Vite

Before we get to Vite, let’s take a quick look at the ES Module.

ES Module

  • Modern browsers support ES Module (IE excepting)
  • Load the module in the following way<script type="module" src="..." ></script>
  • Supports lazy loading of modules’ scripts by default
    • Similar to the script tag set defer
    • Executed after the document has been parsed before the DOMContentLoaded event is triggered

Vite vs Vue-CLI

  • Vite runs directly in the development environment without packaging
    • Vite takes special care of files that cannot be loaded by the browser and returns the compiled results to the browser
  • Vue-cli development mode must be packaged to run the module
    • This also leads to the problem that projects can be very slow if they are very large.
  • Vite is packaged in production using Rollup
    • Package based on ES Module
  • Vue-cli Uses Webpack to pack

The advantages of Vite

  • Quick cold start
  • According to the need to compile
  • Module hot update

The use of Vite

Vite has two ways of creating projects

  • Methods a
npm init vite-app <project-name>
cd <project-name>
npm install
Copy the code
  • Method 2: Create a project based on a template
npm init vite-app --template react
npm init vite-app --templatye preact
Copy the code

Set up the project based on method 1

  1. Initialize the project

2. Install dependencies– After installing the dependencies, take a look at the index.html file in the projectNote that the srCIpt tag here is used to load modules through modules

It seems like there’s no problem, so let’s run the project. Let’s see

As you can see, our page is working. Let’s take a look at the source code of the page

The app.vue file is loaded in main.js, but the browser doesn’t recognize the.vue file, but the project works fine. How does that work?Here we see that it intercepts the.vue file we requested, and modifies the response header to tell the browser that this is a JS script