Build a vue3.0 project from 0 to 1

1. Build the project with vue scaffolding

Step 1: Install node.js

• Download and install node.js of the corresponding system from the official website, and install it after downloading
  
• After the installation is complete, open the cmd command execution window and execute node -v and npm -v to see if node.js is installed successfully. If the version number appears, it proves that the installation is successful, as shown in the figure below:
  

Step 2: Install vue

• Open cmd, execute the npm install -g @vue/cli command (install vue3.0), and wait for the command to complete:
  
• Execute vue -V to see if vue is installed successfully. If the version number appears, it proves that the installation is successful, as shown below:
  

Step 3: Create a vue project using vue scaffolding

• Go to the folder of the vue project (you can create it yourself), and enter the folder, open cmd

• Execute the vue create demo command, where demo is your project name; in the process of creating a project, you will be asked to choose whether to create a vue2.0 or vue3.0 project. According to my needs, I choose vue3.0, as shown in the figure below, after selection Wait for the creation to complete
  

• Enter the demo project file, execute the npm install command in cmd, and install the relevant dependency packages

Step 4: After creating the project, run the vue project

• In the demo folder, run npm run serve to start the project just created

2. Build the project with vite

Step 1: Install node.js

(same as step 1 above)

Step 2: Build a project with vite

• Go to the folder of the vue project (you can create it yourself), and enter the folder, open cmd
• Execute the npm init vite-app vite_demo command, where vite_demo is your project name; wait for the command to complete
• Enter the vite_demo project file, execute the npm install command in cmd, and install the relevant dependency packages

Step 3: After creating the project, run the project

• In the vite_demo folder, run npm run dev to start the project just created
  

3. The difference between vite and vue-cli

• Vite is a web development build tool that enables lightning-fast cold server startup thanks to its native ES module imports
• vue-cli is an official vue.js project scaffolding, use vue-cli to quickly create vue projects
  

4. Other matters

The development software can choose vscode

• Download vscode, https://code.visualstudio.com/
• Open vscode, file --> open folder, select the vue project just now for development