uni-app学习笔记(二)--vue页面代码的构成和新建页面

moxiaoran57532025-05-12 16:15

vue页面的构成

一.template

模板区，主要放html布局，注意，如果是开发uni-app，模板区不要放div,h1等标签了，用了在小程序和app端起不到作用。具体应该使用哪些组件，可在uni-app官网上查看：组件-->内置组件组件使用的入门教程 | uni-app官网

来看下template区域的代码，最外层的template是必不可少的

html 复制代码

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view>aaa</view>
		<view>bbb</view>
		<view>ccc</view>
	</view>
</template>

二.script 是逻辑部分

要实现的功能，主要在这部分进行控制。基于vue3

javascript 复制代码

<script setup>

</script>

三.css样式

用于控制页面元素的样式，一般位于最下面

javascript 复制代码

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

新建页面

如果勾选创建同名目录，那么会创建一个跟页面名同名的目录，同时要勾选在pages.json中注册以便能路由跳转找到相应的页面。勾选以后HBuilder X会自动在pages.json添加对应的路由

复制代码

"pages": [ //pages数组中第一项表示应用启动页
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path" : "pages/demo1/demo1",
			"style" : 
			{
				"navigationBarTitleText" : "demo"
			}
		},
		{
			"path" : "pages/demo2/demo2",
			"style" : 
			{
				"navigationBarTitleText" : "demo"
			}
		}

然后使用浏览器访问http://localhost:5173/#/pages/demo1/demo1 即可访问新页面了

如果没有出现，可尝试把HBuilder X内置浏览器关闭后刷新，或把HBuilder X关闭后重新运行。