Table of contents
(2) The performance improvement brought by vue3 compared with vue2
Two, two creation methods of vue3
Method 1: Use vue-cli to create (recommended-comprehensive)
1. Introduction to vue3
(1) Introduction to vue3
Version 3.0 will be released on September 18, 2020. Codename One Piece (One piece)
It took more than two years, 2600 submissions, 30+RFC, 600+PR, 99 contributors
(2) The performance improvement brought by vue3 compared with vue2
1. Faster rendering speed: Vue 3 uses a new virtual DOM implementation, which can render pages faster and reduce page flickering and stuttering. 55% faster initial render, 133% faster update render
2. Better TypeScript support: Vue 3 introduces comprehensive TypeScript support, including type checking and code hints.
3. Better responsive system: The responsive system of Vue 3 is more flexible and efficient than Vue 2, and can better handle nested data and responsive arrays.
4. Better component encapsulation: Vue 3 introduces Composition API, which can better encapsulate the logic and state of components, and make the code more readable and maintainable. 44% less memory
5. Less bundle size: The core library of Vue 3 is much smaller than Vue 2, which means faster download speed and less resource usage. 41% reduction
6. Better Tree-Shaking: The module system of Vue 3 uses ES modules, which can better support Tree-Shaking.
Overall, Vue 3 has improvements in performance, development experience, and code organization, making it more suitable for large, complex application development.
Two, two creation methods of vue3
Prerequisite : node version 10 or above is required
Method 1: Use vue-cli to create (recommended-comprehensive)
prerequisite
@vue/cli version is above 4.5.0
View by
vue --versionHow to install or upgrade
1. Uninstall the old one
npm uninstall vue-cli -g
2. Install new
npm install -g @vue/cli
Steps
1. Create a folder and choose to open it in the terminal
2. vue create command + custom project name
vue create v1
3. Press the up and down keys to select this customized version, and then press Enter
4. Press the space bar to select, and press the Enter key after completion
5. Select version 3 and press Enter
6. Select y, then enter
7. Select the first carriage return
8. Select the first carriage return
9. Do you want to set this configuration as the default option for future project creation, select N
10. Follow the prompts given to continue typing
11. Complete the construction visit and create this URL
Access successful
Method 2: Use vite to create
vite is a new generation of front-end construction tools
Advantage:
In the development environment, no packaging operation is required, and quick cold start is possible
Lightweight and fast hot reload
True on-demand compilation, no longer waiting for the entire application to be compiled
Steps
1. Create a folder and choose to open it in the terminal
2. Enter the npm init vite-app command + custom project name
npm init vite-app v2
3. Select y and press Enter
4. Continue to enter commands according to the prompt
5. Complete the establishment and start accessing the web page
npm run dev
6. Successful access
If you have any questions, you can leave a message in the comment area, and you will reply when you see it
If you think this article is helpful to you, please support it! ! !
Like, collect and comment , of course, you can also click the red envelope at the bottom of the article or subscribe to support the creation of the article. Fist!