3.创建页面及vue页面内基本组成部分

pages/index/index.vue的代码：

<template>
	<view class="layout">
		<view class="box1">aaa</view>
		<view class="box2">bbb</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss">
	.layout{
		border: 1px solid red;
		.box1{
			border: 1px solid green;
		}
		.box2{
			border: 1px solid blue;
		}
	}
</style>

运行效果：

新建页面

pages/demo/demo1.vue代码：

<template>
	<view>
		demo1
	</view>
</template>

<script setup>
	
</script>

<style>
	       
</style>

运行效果：

pages.json中navigationBarTitleText:设置导航栏标题文字内容
代码如下：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path" : "pages/demo1/demo1",
			"style" : 
			{
				"navigationBarTitleText" : "demo1页面"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

运行效果：