A few days ago, I learned to install Vue-CLI, and now it is officially recommended to use create-vue to create new projects based on Vite. Tried to install it, it seems easier.
Step 1 Install node.js
Whether it is vue2 or vue3, node needs to be installed. Go to the nodejs official website to download the corresponding installation package at
http://nodejs.cn/download/
After the installation is complete, check the version information of node.js. The command is:
node -v
![Insert picture description here](https://img-blog.csdnimg.cn/236f7b32a58e4
If it is a windows system, Win+R runs cmd, enters the command line window, and enters the command in the terminal
node -v
Check node version
Note: It is better for the operator to have a certain foundation of DOS commands.
- DIR command meaning: display information about all files or directories on the specified path
- CD command meaning: enter the specified directory
Step 2 Install Vite
Some computers may fail to create cmd when opening it as a normal user. You need to "right-click/open as administrator" to run the command line window.
After installing Node.js, go to the specified directory (using the cd command), and then run the following command on the command line:
npm init vue@latest
This command will install and execute create-vue, enter the project name (in this case, the project name is vite2), and then you will see some optional feature prompts such as TypeScript and test support. If you are not sure whether to enable
a function, you can directly press the Enter key to select No.
After the project is created, install dependencies and start the development server by doing the following:
cd vite2
npm install
npm run dev
Visit http://localhost:5173/ in the browser to open the following page:
Press Ctrl+C to stop the project from running.
Step 3 Run the terminal in VSCode
Open the vite2 project in VSCode.
Select the Terminal/New Terminal command and enter the command in Terminal
npm run dev
Hold down the Ctrl key and click http://localhost:5173/ at the same time to open the above Vite+Vue3 page.
Similarly, press Ctrl+C to stop the running of the project.
When running the project in vscode, the system will prompt to install the corresponding plug-in, just click to install.
(1) Install the recommended plugin Vue Language Features (Volar)
(2) Install the recommended plugin TypeScript Vue Plugin (Volar)