Vue.js project construction initialization, based on vue-cli scaffolding (vue learning - Ch1.1 initialization)

1. Front software installation

Install node.js

Vue.jsIt runs based on nodethe environment , so it needs to be installed first node.js.

• Just download the latest version from the official website of nodejs.org and install it.
• Use Win + Rthe key to open the terminal, enter in it npm -vand press Enter. If a string of numbers is displayed, the installation is successful.

install vscode

vscodeThe full name is visual studio code, the current mainstream code editor, also downloaded and installed through the official website.

• Download and install through the vscode official website link .

2. Create a Vue.js project

Determine file storage location

First, you need to find a place to store your project, such as E:\GitBase(this is your custom), and then you will create a vueprojfolder to store the entire project.

• Determine the storage location and folder name of the project according to your own situation
• It is not recommended 桌面 Desktopor C盘根部 C:\to house the project.

Open a terminal at the project location

When you use Win + Rthe key to open the terminal, you will find that there is a C:\Users\AdministratorThis is your 当前所指向terminal file directory.
We will create the project through the terminal, so we must point this directory to you just now 确定文件存放的位置, then you only need to:

• Open/create the folder in that location, for example E:\GitBase, you find that there is nothing in it.
• Click on the bar marked 此电脑 > 应用程序(E:) > GitBasewith , type it cmd, and press Enter.
• You got a terminal in E:\GitBasethe directory .

Of course, you can also directly redirect the current file directory through the command, but you can do this first for the time being.

Open folder and terminal in vscode

After understanding the above terminal opening method, we will use vscode to perform this operation:

• Open vscode, if prompted to switch languages, switch to Chinese.
• Click in the middle of the screen 启动 - 打开文件夹or select in the upper menu bar 文件 - 打开文件夹.
• Find yours 项目位置目录like mine here E:\GitBase.

In this way, the folder is successfully opened, and you will find that your folder name 文件目录略缩图is displayed , such as mine GitBase, which means that you will work around all the contents of this folder in vscode.

• Next click 终端 - 新建终端.
• You get a terminal E:\GitBaseembedded in vscode, which is more convenient and practical.

Enter the command to create a Vue.js project

Continuing with the content of the previous section, after opening the terminal of vscode:

• enternpm init vue@latest
• You will see a line of text Vue.js - The Progressive JavaScript Framework, if not, please try to change the source of your npm (switch the download source server)
• The following reminds you to enter your name project name, such as I enter here vue, this will be the name of the main folder Vue.jsfor .
• Next, press EnterEnter to continue, and there is no need to install other extensions for the time being.

Next you should see the following lines, indicating that the creation is complete:

Done. Now run:
  cd vue
  npm install
  npm run dev

3. Start the Vue.js project

Understand the above lines of instructions

After completing the content of the previous section, let's understand the meaning of the above lines:

1. cd vueMake the terminal enter the vue folder in the current directory, such as E:\Gitbaseentering E:\Gitbase\vue.
2. npm installAnalyzing and installing all the required dependencies of the current nodeproject Vue.jsis based on nodethe work . For the time being, you only need to know that as long as you install new dependencies, you can enter this command. Now you only need to enter it once to complete Vue.jsthe initialization of the scaffolding project.
3. npm run devThis is also a nodecommand , which represents devthe command to run this script. You also only need to know it for the time being. Enter this to run the entire project.

Successfully start the Vue.js project

When you type npm run devand wait for a while the project will start successfully and you will see the following message:

  VITE v4.0.3  ready in 321 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

At this point, hold Ctrldown and click http://127.0.0.1:5173/the link in your terminal to open 前端页面your , Vue.jsand the default project of has been successfully started here. Congratulations, you have taken a big step towards success~