Build the vue-cli 3.x environment and create the first vue project

How to build VUE environment in Windows 10 system

1. First, you need to download node.js,

The operation of vue depends on the npm management tool of node. You can download it on the official website, http://nodejs.cn
Insert picture description here

2. After the download is complete, you need to install node.js

After double-clicking to install, open the command line and enter node -v to see if the installation is successful. The
Insert picture description here
picture shows that the installation is successful.

Three, after installation, you need to replace the cnpm mirror

As we all know, the use of npm in China is particularly slow, so it is recommended to use Taobao's npm mirror,
then Taobao's cnpm management tool will replace the npm management tool.
1. Next, create two new folders node_global and node_cache in the installation directory of node.js
Insert picture description here

2. After creating the two folders, enter the following command in the cmd window (the paths of the two folders):

npm config set prefix "E:\node\node_global"
npm config set cache "E:\node\node_cache"

3. Open the command line and enter npm install -g cnpm --registry=https://registry.npm.taobao.org to download Taobao mirror
. The figure shows that Taobao mirror is being downloaded.

Insert picture description here

The figure shows that the download is complete.
Insert picture description here

Three, Node.js environment variable configuration

Set the computer environment variables, right click "My Computer" -> Properties -> Advanced System Settings -> Environment Variables, start the configuration of
Insert picture description here
the environment variables, click New in the system variables, create a new NODE_PATH
Insert picture description here
copy the nodejs directory path (E:\node) and then Select the Path in the user variable, click'Edit'-->'New'--> Enter the address just copied--> Confirm completion.
Insert picture description here
At this point, the npm environment variable configuration is complete, and you can still use npm -v in the command line.
6. Next, we need to configure the environment variables of cnpm. After
the Taobao mirror installation just now is completed, data will be generated in the node_global (folder just created by yourself) module of E:\node. Now what we need to do is to
select the Path in the user variable. , Click'Edit'-->'New'-->Enter the directory location of the node-global module (E:\node\node_global)-->Confirm completion.
Insert picture description here
7. Verify that the cnpm environment variable configuration is successful.
Restart the command line and enter cnpm -v in the command line. If the following interface appears, the configuration is successful
Insert picture description here

Fourth, install vue scaffolding

Enter in the command line

 cnpm install -g @vue/cli
# OR
yarn global add @vue/cli

To install the scaffolding, as shown in the figure below, the installation is complete
Insert picture description here
. Enter in the command line

vue -V

To check whether the scaffolding is installed successfully. So
Insert picture description here
far, the scaffolding is installed successfully.

Five, create the first vue project

1. Enter vue ui in the command line and the
following picture
Insert picture description here
will appear, and the following webpage will pop up
Insert picture description here
2. Create a project
Next, start creating a project
Insert picture description here
Insert picture description here
Insert picture description here

Start to create the project as shown in the figure below, and there is progress in the command line. Insert picture description hereInsert picture description here
Now all you have to do is to wait for the project to be created.
Insert picture description here
When this interface appears, and the command line becomes the figure below, the creation is successful Insert picture description here
. 3. Open the project (no editor can be skipped) This step)
can open this project in webstorm or IDEA. Demonstrate that IDEA is turned on here (IDEA needs to install the node plug-in, otherwise it can’t)

Insert picture description here
This is the result of opening in IDEA and IDEA has not installed the plug-in. Next, we Insert picture description here
search for Vue.js in file ->settings ->Plugins to install it. After the installation is complete, we need to restart IDEA. After restarting, open the project just created. It is found that the red circle has changed
Insert picture description here
. 4. Start the project (without a compiler, please see step 5)
, execute the following commands in the terminal one by one

1.npm install
2.npm run serve

When the first command is
Insert picture description here
executed , it appears when the second command is executed. It means
Insert picture description here
the operation is successful. Click the blue website link to jump.
If there is no compiler, perform the following steps.
Go to the location of the project in the cmd command line, as shown in the figure below (here my project name is jiaochengdemo1).
Insert picture description here
Next, enter the command of step 4
here, and a perfect VUE project is The creation is complete.

Guess you like

Origin blog.csdn.net/qq_46140800/article/details/105883215