uni-app中的项目目录结构的解析

最新推荐文章于 2024-04-03 10:29:28 发布

CssHero

最新推荐文章于 2024-04-03 10:29:28 发布

阅读量1.3k

点赞数 26

文章标签： uni-app 前端

本文链接：https://blog.csdn.net/csshero/article/details/136159595

版权

文章目录

概要

本文主要介绍uni-app中的项目目录结构的解析

一.项目目录结构

1.main.js

main.js是 uni-app 的入口文件，主要作用是：

✓ 初始化vue实例。

✓ 定义全局组件。

✓ 定义全局属性。

✓ 安装插件，如：pinia、vuex 等。

2.App.vue

– 作用

App.vue入口组件
- App.vue是uni-app的入口组件，所有页面都是在App.vue下进行切换
- App.vue本身不是页面，这里不能编写视图元素，也就是没有元素
App.vue的作用：
- 应用的生命周期
- 编写全局样式
- 定义全局数据 globalData
注意：应用生命的周期仅可在App.vue中监听，在页面监听无效。

– 定义全局数据

通过globalData

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		globalData: {
			name: "wuu",
			age: 20
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

– 拿到当前页面路由

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面

3.uni.scss

– 写在里面的内容

定义自定义的全局样式变量
重写uni-app内置的样式变量
重写uni-ui内置的样式变量

◼ uni.scss 全局样式文件

 为了方便整体控制应用风格。默认定义了uni-app框架内置全局变量，当然也可以存放自定义的全局变量等

 在uni.scss中定义的变量，我们无需 @import 就可以在任意组件中直接使用。

 使用uni.scss中的变量，需在 HBuilderX 里面安装 scss 插件（dart-sass插件），

 然后在该组件的 style 上加 lang=“scss”，重启即可生效。

– uni.scss案例

// 1.定义自定义的全局样式变量
// 导入外部自定义的样式变量
@import '@/static/css/base.scss';
$radius: 12rpx;

// 2.重写uni-app内置的样式变量
$uni-color-primary: #007aff;

// 3.重写uni-ui内置的样式变量
// 和修改vant差不多

使用样式变量
- 使用时要lang为scss，不要@import导入

<template>
	<view class="content">
		<div class="test">测试</div>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.test{
		width: 100rpx;
		height: 100rpx;
		background-color: #bfa;
		color: $color;
		border-radius: $radius;
	}
</style>

– 全局样式和局部样式

◼ 全局样式

App.vue 中style的样式为全局样式，作用于每一个页面（style标签不支持scoped，写了导致样式无效）。
- App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。
uni.scss 文件也是用来编写全局公共样式，通常用来定义全局变量。
- uni.scss 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。

◼ 局部样式