Step by step, configure nodesjs environment with hbuilder for Vue JS development

In our last blog post, we talked about the use of... In wechat applet development asp.net Of webservice service , This blog post uses hbuild3.2.16 as well as nodes13.14.0 Let's talk about hbuilder Lower model nodes.js do js Project development ,webservice The establishment of the server . Of course , You can also set up a service to provide data and network services for other applications .

One 、 install nodes
First step , Install first node.js, You can download it on the official website , about win7 It is worth noting that you should choose the corresponding version , Some don't support win7 Of , Support win7 The last version number of is ：[node-v13.14.0-x64.msi]（ If you are windows10 You can use the above operating systems according to your windows Version to determine higher nodes.js）(https://nodejs.org/download/release/v13.14.0/node-v13.14.0-x64.msi)

Each step is completed according to the default point , No more details here . Is the installation successful , You can come to cmd In mode , Let's see , Enter the following command to detect

If it can be displayed normally, it means success

Two 、 To configure node.js plug-in unit
by hbuilder Configuration plug-ins , stay " Tools " Under the menu “ Plug in installation ” Next , Open the following dialog box

Instant installation complete ！ If you use vscode To write node.js You still need to pass cmd To configure the installation vue,hbuilder Automatically complete directly when you create a new project （hbuilder and vue It is seamless ）.
of vue Support for , One more sentence , according to hbuilder Introduction to the official website ,hbuilder3.25 after , Yes vue3 Our support is stronger . So you can download the higher version hbuilder！

3、 ... and 、 Create a new project to test the previous results
Create a new project to see , We assume that the project name is test( A lower... Is selected here vue edition 2.6.10 In order to run smoothly , You can according to your windows Version to determine higher vue)

Click Create , We must wait for a while , Because the system needs to prepare a lot of documents and environment for the project . The creation is complete , We can do it in node_modules See a complex directory tree , This is the document prepared for us . Click its properties and you will find 85~10M

Right click the item name , Compile

Next run , Continue to click... Under the external command in the right-click menu npm run serve. function

therefore , We can access it through the page , Try it ：

Four 、 Start writing code
1、 Look at the default home page of the project （index.html）

Familiar with a little html All the children's shoes know , The content is usually written in body Inside the label , From the code above, we can see , What a clean content , Where did the default words and figures in the above figure come from ？ Is there a mistake , Let's add two lines

Run to observe , you 're right , It's this file , The page has changed , The second line added is all inside . OK, the first line is gone .

There's something fishy in this line , It should be the applied style , there id="app" It must be the problem , Look at the application id Label style

 <div  id="app" ><strong>First nodejs project</strong></div>

Get rid of it , The world is clean , as for app How to implement it? We can check src In the catalog app.vue And the documents contained in it helloworld.vue, We won't discuss it here for the time being .