uniapp initial page

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

Guess you like

Origin blog.csdn.net/feng8403000/article/details/132428432