download: Vue3 system entry and project combat
Who said that courses prepared for the zero foundation must be shallow? This course takes you easy to get started, master Vue3 in depth, and consolidate front-end hard skills. The courses range from basic Vue3 syntax, to component principles, animation, code design, and new syntax extensions, from the shallower to the deeper, comprehensively and systematically combing the Vue knowledge points. During the learning process, the teacher will also teach you many years of "pit avoidance experience", and at the end will take you to complete the "Jingdong Daojia" application in accordance with the enterprise-level code quality and engineering development process to achieve a thorough grasp of the framework.
Suitable for
students who want to thoroughly get started with Vue from scratch; students who
want to understand the principles and new grammar of Vue3; students who
want to expand their front-end knowledge and seek opportunities for promotion and salary increase.
Technical reserves are required to be
familiar with basic JS grammar;
understand Npm development Environment;
understand the basic operation of Webpack
Vite is a web development and construction tool developed by You Yuxi, the author of Vue. It is a development server based on the browser's native ES module import. In the development environment, the browser is used to parse the import, and the server is compiled and returned on demand. The concept of packaging is skipped, and the server is ready to use. At the same time, it not only provides support for Vue files, but also supports hot updates, and the speed of hot updates will not slow down as the number of modules increases. Use Rollup packaging in a production environment.
Vite has the following characteristics:
Fast cold start and instant hot module replacement (HMR, Hot Module Replacement) Real on-demand compilation Vite was developed when Vue 3 was launched, and currently only supports Vue 3.x, which means that libraries that are incompatible with Vue 3 cannot be used. Use with Vite.
Use Vite
Similar to Vue CLI, Vite also provides a way to use npm or yarn to generate project structure. Select a directory, open the command prompt window, execute the following commands in sequence to build the scaffolding project, and start the project.
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
If you use yarn, execute the following commands in sequence:
yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev
For example, the created project is named hello, and the result of executing the last command is shown in the figure below.
Startup project
Because Vite uses the browser's native ES module import function, but IE 11 does not support ES module import, so based on the Vite development project, the browser cannot use IE11, and other mainstream browsers support the ES module module function.
Open the Chrome browser and visit http://localhost:3000/, the interface is as shown in the figure below.
The default page of the hello project
The project structure generated by Vite is shown in the figure below.
Directory structure of the hello project
It can be found that the directory structure of the scaffold project generated by Vite is very similar to the project directory structure generated by Vue CLI, which is indeed the case, and the development method is basically the same. However, the default configuration file of the Vite project is vite.config.js, not vue.config.js.
The content of the package.json file is as follows:
{
"name": "hello",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.2"
},
"devDependencies": {
"vite": "^1.0.0-rc.8",
"@vue/compiler-sfc": "^3.0.2"
}
}
If you want to build the release version of the application in the production environment, you only need to execute the following command in the terminal window:
npm run build
Although the author of Vite has done a lot of work behind the scenes to allow us to follow the development habits of scaffolding projects based on Vue CLI, there are still some subtle differences. For a detailed introduction, please refer to the GitHub website of the Vite source code library.
Difference from Vue CLI
The main difference is that for Vite, there is no bundling during the development process. The ES Import syntax in the source code is directly provided to the browser. The browser supports parsing these syntaxes through the native <script module>, and initiates an HTTP request for each import. The dev server intercepts the request and performs code conversion when necessary. For example, the content imported into the *.vue file is compiled on the fly before being sent back to the browser.
This method has several advantages:
Because there is no packaging work to do, the server cold starts very quickly. The code is compiled on demand, so only the code actually imported on the current page will be compiled. We don't have to wait until the entire application is packaged to start development, which is a huge difference for applications with dozens of pages. The performance of Hot Module Update (HMR) is decoupled from the total number of modules. This allows HMR to stay fast no matter how big the application is. The reload of the entire page may be slightly slower than the setting based on the binding package, because the native ES import will cause a network waterfall with a deep import chain. However, since this is a local development, the difference compared with the actual compilation time is very small. Since the compiled files are cached in memory, there is no compilation overhead when the page is reloaded.
Simply put, using Vite to develop Vue 3 projects can reduce unnecessary waiting time for project restarts or module updates, and speed up development progress. In the generation environment, we still need to package the project to avoid frequent network requests. Vite also provides a vite build to achieve this. We execute npm run build in the terminal window, and the actual execution is vite build command.