How to build a VUE environment
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
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
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
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.
The figure shows that the download is complete.
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
the environment variables, click New in the system variables, create a new NODE_PATH
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.
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.
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
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
. Enter in the command line
vue -V
To check whether the scaffolding is installed successfully. So
far, the scaffolding is installed successfully.
Five, create the first vue project
1. Enter vue ui in the command line and the
following picture
will appear, and the following webpage will pop up
2. Create a project
Next, start creating a project
Start to create the project as shown in the figure below, and there is progress in the command line.
Now all you have to do is to wait for the project to be created.
When this interface appears, and the command line becomes the figure below, the creation is successful
. 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)
This is the result of opening in IDEA and IDEA has not installed the plug-in. Next, we
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
. 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
executed , it appears when the second command is executed. It means
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).
Next, enter the command of step 4
here, and a perfect VUE project is The creation is complete.