current position:Home>Step by step, configure nodesjs environment with hbuilder for Vue JS development

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

2022-04-29 18:12:21Hexi stone

In our last blog post, we talked about the use of... In wechat applet development 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)(

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

 Insert picture description here
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
 Insert picture description here
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)
 Insert picture description here

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
 Insert picture description here
Right click the item name , Compile
 Insert picture description here
Next run , Continue to click... Under the external command in the right-click menu npm run serve. function
 Insert picture description here
therefore , We can access it through the page , Try it :
 Insert picture description here

Four 、 Start writing code
1、 Look at the default home page of the project (index.html)
 Insert picture description here
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

 Insert picture description here
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 .
 Insert picture description here
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 .
 Insert picture description here

copyright notice
author[Hexi stone],Please bring the original link to reprint, thank you.

Random recommended