index.vue布局

1.页面组成

<template>模版组件区

<script>脚本区

<style>样式区

<template> //类似于html
	<view class="layour">
		<view class="box1">box1</view>
		<view class="box2">box2</view>
	</view>//view类似div
</template>

<script>//由于编写脚本，可以通过lang属性指定脚本语言
	
</script>

//css样式，scss需要下载配置
<style lang="scss">
	.layour{
		border: 1px solid red;
	}
</style>

 

1.1<style>可以设置其它class子元素。

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

2.创建新页面

 2.1点击pages，右键新建页面。

2.2 输入要创建的vue名称。

2.3 创建完在<view>写一个我是demo1。

<template>
	<view>
		我是demo1
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

运行图。运行路径加/pages/demo1/demo1

2.4导航栏名称

3.自定义模板

拷贝代码。 

<template>
	<view class="">
		
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>

</style>

创建一个文本文档。 vue3-setup-js.vue

 

拖过来拷贝一下之前的代码