uniapp static目录介绍 (import、uni.scss文件、app.vue应用配置文件使用方法)

static

首先我们要了解的一下uniapp项目中的static目录是什么的，static是项目用来存放静态资源用的，在我们uniapp项目编译的时候会一起加载，我们可以在static放我们项目中要用到的图片、视频等资源，或项目要用的的css文件、scss文件等等，但是当我们的东西多了之后，我们在编译运行项目的时候就会很慢，这是因为运行时需要加载你的static文件，所以我们推荐把我们的css、lass/scss等文件用一个common文件来存放，由于没有在static文件中，所以他运行的时候不会被加载，这是时候我们就需要使用@import导入我们需要的一些css、less/scss文件。

更多关于static目录的说明：工程简介 | uni-app官网

import

我们在项目的开发中通常会需要用到ref、onLoad等一下不属于自己的创建的东西或者是自己创建的一些自定义模块，在我们需要用到它们的时候就可以通过import来导入。

使用示例

如：

导入ref

<script setup>
import { ref } from "vue";
</script>

导入onLoad

<script setup>
import { onLoad } from "@dcloudio/uni-app";
</script>

 uni.scss

uni.scss文件主要的用处就是用于控制应用的整体风格样式，如按钮颜色、(文字字体、大小、颜色)、边框样式等，uni.scss文件在项目创建的时候就有一批预留的样式，注意：在此文件进行增删改样式都要重新运行项目，因为scss文件时预编译文件，只是再项目刚运行进行的预编译。

使用示例

再uni.scss尾部导入common的scss文件

导入后重新启动项目

@import "@/common/scss/customScss.scss"

如果需要使用uni.scss中的常用变量就需要再style中用 lang="scss"来声明，然后就可以直接使用uni.scss中的变量了 

<style lang="scss">
.box{
    color:$uni-text-color;
    }
</style>

app.vue

app.vue文件的作用就是用来监听应用声明周期、配置全局样式等，虽然说这是一个.vue文件，但是这个文件不能编写视图元素，注意：如果你需要用到应用生命周期函数的话，就要再此文件编写，因为再页面监听无效。

使用示例

如：

再common中编写一个应用于全局的.css样式文件，然后再app.vue中导入

<style>
	/*每个页面公共css */
	@import "@/common/css/customStyle.css";
</style>

导入之后我们只需要再customStyle.css中去进行增删改样式即可，不用再页面上为其添加css样式了