We want to learn the Vite project, you can learn it step by step on the official website, start | Vite official Chinese documentation
We follow the tips here to create the first Vite project step by step.
We choose to use this command in cmd to create the first vite project:
npm create vite@latest my-vue-app -- --template vueFirst, we run cmd as administrator, then we switch to our project folder,
For example, here is the folder for our future Vite project. We can click on the address bar above and copy it (note! This project folder must be empty)
Then we enter cd space in the cmd command box and then right-click to paste the path and press Enter. We find that the path position has not changed because we have not switched the drive letter. Then we enter d: and press Enter to switch to us. The desired directory
By the way, this kind of command syntax is called DOS syntax. Interested students can search it on Baidu.
After switching in, let’s paste the command we have prepared to create the Vite project.
Okay, the creation is successful. In our command, create is created once, vite@latest is to create the latest version of vite, my-vue-app is our project name, we can change this ourselves, and we have created it. After that, it will be displayed below, complete. Now run: Let’s copy and paste these three commands one by one.
By the way, to copy in the DOS command box, you can left-click to select and then right-click to copy. If you want to paste, just right-click.
Okay, the appearance of this interface means that we have successfully run it. You can visit the URL below to take a look.
At this point, our first Vite project has been built.
Okay, let’s start packaging, still in the command line. What if we want to exit this interface? We can enter ctrl+c to terminate the program.
Enter this command to package. After the packaging is completed, the files will be in the dist directory of the my-vue-app project. We find this folder in the file explorer.
npm run build
Next, we copy all the two files and a folder here to the nginx html directory:
It's at this location, we can just paste it directly, because there is already an index.html file, and it will prompt whether to overwrite the duplicate name, we just click to overwrite it.
Okay, next we run nginx and then go to the browser to access
You can see that the address above is the address of our nginx, which is also the project we just created.
