Create a new project based on Vite

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 insert image description here
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. insert image description here
After the project is created, install dependencies and start the development server by doing the following:

cd vite2
npm install
npm run dev

insert image description here
Visit http://localhost:5173/ in the browser to open the following page:
insert image description here
Press Ctrl+C to stop the project from running.

Step 3 Run the terminal in VSCode

Open the vite2 project in VSCode.

insert image description here
Select the Terminal/New Terminal command and enter the command in Terminal

npm run dev

insert image description here
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) insert image description here
(2) Install the recommended plugin TypeScript Vue Plugin (Volar)
insert image description here

Guess you like

Origin blog.csdn.net/wangyining070205/article/details/127141949