Tool download
https://www.dcloud.io/hbuilderx.html
Download an HBuilder by yourself, usually for win, there is no difference.
create project
When creating a project, select [Hello uni-app]
Creating a project requires a network
Automatically import the environment
initial project run
1. Click [Run]
2. Select [Run to browser]
3. Select [Chrome] browser to open
Download built-in browser
Modify home page information
Check the running effect
In the built-in browser, you can modify the corresponding model and view the corresponding output results.
G
┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)。
├─platforms 存放各平台专用页面的目录,
├─nativeplugins App原生语言插件
├─nativeResources App端原生资源目录
│ ├─android Android原生资源目录
| └─ios iOS原生资源目录
├─hybrid App端存放本地html文件的目录,
├─wxcomponents 存放小程序组件的目录,
├─unpackage 非工程代码,一般存放运行或发行的编译结果
├─AndroidManifest.xml Android原生应用清单文件
├─Info.plist iOS原生应用配置文件
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听。
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,
├─pages.json 配置页面路由、导航条、选项卡等页面类信息,
└─uni.scss 这里是uni-app内置的常用样式变量
create new page
page
resource join
Installation process
Here we choose vue3, so we need to download the right plugin.
Wait for a while and the installation is successful.
edit run
Since we added the vue page, it needs to be re-edited before it can run again.
Functional example package
There are all functions in the package, we can directly and quickly go to the corresponding function to copy and use.
You can access it yourself in your browser: http://localhost:5173/pages/component/view/view