Use HBuilder-X to create a uniapp project and start the demo

Preface

Preparation before class: HBuilder-X software and browsers such as Google and Firefox need to be installed.

Official website: https://www.dcloud.io/

1. Create a project

Click File->New->Project:

Insert image description here

then:

Click uni-app
Fill in the project name
Select project path
Select the project template, I choose the default here
Options Vue version
Click to create project

Insert image description here

The project creation is completed. The project structure created by the default template is as follows:

Insert image description here

2. Run the project

We clicked the run button on the menu bar and found that it can be run in a variety of ways, as follows:
Insert image description here

We first introduce the following types:

run into browser
Run into the built-in browser
Run into the applet simulator

2.1 Run into browser

Click 运行到浏览器to select the browser you want to display:

Insert image description here

If the program cannot find the corresponding browser and fails to run, we need to configure the browser address and click 配置web服务器, as shown in the figure:
Insert image description here

Configure the corresponding browser installation startup program to run the project normally, as shown in the figure:

Insert image description here

If you don’t know where your software is installed, you can find the browser icon on the desktop and click to open the file location, as shown in the figure:
Insert image description here

2.2 Run to the built-in browser

Click 运行到内置浏览器, and the software will prompt you to download the plug-in. Just download it according to the prompts. After downloading, just re-run the project, as shown in the figure:
Insert image description here

2.3 Run to the applet

The operation methods of so many mini programs are similar. I will take the WeChat mini program as an example.

Click 微信开发者工具, as shown in the picture:

Insert image description here

If the WeChat developer tools are not installed, you will be prompted to download and install them. Just follow the prompts to download and install them. There will be no demonstration here. After the download is complete, everything will be installed by default.

After the installation is complete, go to 配置web服务器the page and configure the path of the WeChat developer tools, as shown in the figure:

Insert image description here

Then we restarted the project and found that the startup still failed, as shown in the figure:

Insert image description here

We need to go to the WeChat developer tools and open a setting. We open the software and click on the setting in the upper right corner:

Insert image description here

Click on Security Settings and open 服务端口it:

Insert image description here

Recompile and run successfully, as shown in the figure:

Insert image description here

3. Attention

3.1 Modify code hot update

After we change the code, Ctrl + S saves the project file, the project will be automatically recompiled, and we can see the latest page by refreshing it in the browser.

3.2 Syntax description

Although we can directly write H5 and other tags like writing vue <div><div/>, and they can be displayed normally in the browser, but they cannot be displayed normally in mini programs and Android. We need to write the project according to the tag specifications of uniapp.