uni-app学习条记(二)--vue页面代码的构成和新建页面
vue页面的构成一.template
模板区，重要放html布局，留意，假如是开发uni-app，模板区不要放div,h1等标签了，用了在小程序和app端起不到作用。详细应该使用哪些组件，可在uni-app官网上查看：组件-->内置组件组件使用的入门教程 | uni-app官网
https://i-blog.csdnimg.cn/direct/1cc18dce8bea42d7b2f4eaa5886482e9.png
来看下template地区的代码，最外层的template是必不可少的
<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
<script setup>
</script> 三.css样式
用于控制页面元素的样式，一般位于最下面
<style lang="scss">
.layout {
border: 5px solid red;
.box1{
border:2px solid blue;
}
.box2{
border:1px solid green;
}
}
</style> 新建页面
https://i-blog.csdnimg.cn/direct/d004b80abff145d181c5de1703311d1e.png
假如勾选创建同名目录，那么会创建一个跟页面名同名的目录，同时要勾选在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"
}
} https://i-blog.csdnimg.cn/direct/a029594ee58241b0b9a2468e8b037ce3.png
然后使用欣赏器访问http://localhost:5173/#/pages/demo1/demo1 即可访问新页面了
https://i-blog.csdnimg.cn/direct/d90efdb942b742988b4795c857ceb16d.png
假如没有出现，可实验把HBuilder X内置欣赏器关闭后刷新，或把HBuilder X关闭后重新运行。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]