uni-app项目目录架构

发布时间：2023-04-24 12:30:54 所属栏目：教程来源：

导读：在创建完成 uni-app 项目后，系统会默认帮我们生成一些文件，这些文件就是初始项目目录结构。

日常开发过程中，都是需要在这个目录结构的基础上面完成项目搭建，所以，我们首先需要了解这个初始目录结构各个目录的

在创建完成 uni-app 项目后，系统会默认帮我们生成一些文件，这些文件就是初始项目目录结构。

日常开发过程中，都是需要在这个目录结构的基础上面完成项目搭建，所以，我们首先需要了解这个初始目录结构各个目录的含义。

在创建项目时，选择不同的模板生成的项目目录是不一样的，我们先介绍两个最常见的项目模板，uni-ui 项目模板、Hello uni-app 模板。了解这两个项目模板生成的项目目录，其他模板生成的目录也可以掌握。

uni-ui 项目目录介绍

创建项目时，我们可以选择创建什么类型的模板，如果选择 uni-ui 项目模板，系统就会自动帮我们生成下面的项目目录。

文件名称   作用
components   是一个用来存放组件的文件夹，从外部引用的组件，或者自己自定义的组件都是放在这个文件夹中
pages   是一个用来存放所有页面的文件夹，也是我们经常操作的一个目录
static   是一个存放静态资源的文件夹，例如图片等
unpackage   是打包目录，存放打包后的文件。有些新建项目目录中没有这个文件夹，在微信开发者工具等编译平台运行后，也会生成这个文件。
App.vue   是页面入口文件，所有页面都是在 App.vue 下进行切换的，可以调用应用的生命周期函数
main.js   是项目入口文件，主要用来初始化 vue 实例并使用需要的插件
manifest.json   是应用配置文件，用于指定应用的名称、图标、权限等
pages.json   是全局配置文件，可以配置页面文件路径、窗口样式、原生的导航栏、底部 tab 栏等
uni.scss   是 uni-app 的样式包。在其他文件中可以快速引用样式包里面的样式
其中 unpackage 打包目录，存放的是打包后的文件，有时候打包后会出现图片或者组件失效的情况，可以检查一下引用路径是否有错误。

Hello uni-app 项目目录介绍

创建项目时，选择 Hello uni-app 项目模板，项目创建完成后，会帮我们生成下面的项目目录。其中有几个文件与 uni-ui 项目目录重复了，作用都是一样的。

文件名称   作用
common   是存放公共 js 和 css 的文件夹
components   是用来存放组件的文件夹
hybrid   是存放本地网页 .html 文件的文件夹
pages   是用来存放所有页面的文件夹
platforms   是存放各平台专用页面的文件夹，如果想把各平台的页面文件更彻底的分开，可以 platforms 目录中创建子目录，存放不同平台的页面文件
static   是存放静态资源的文件夹
store   是 vuex 状态管理文件夹，在 uni-app 项目内置了 vuex，使用时直接在 main.js 里面配置一下就可以了
wxcomponents   存放小程序组件的目录，详见 2.1
unpackage   打包目录
App.vue   页面入口文件
main.js   项目入口文件
manifest.json   应用配置文件
package.json   是项目的主配置文件，里面包含了 uni-app 项目的基本描述信息、项目所依赖的各种第三方库以及版本信息、以及可执行的脚本信息
pages.json   全局配置文件
template.h5.html   是 h5 端的网页模板文件
uni.scss   uni-app 的样式包

各平台小程序组件存放目录
uni-app 还有一个非常牛的地方，就是支持在 App 和小程序中使用小程序自定义的组件，支持情况如下：

平台   支持情况   小程序组件存放目录
H5   从 HBuilderX2.4.7 起，支持微信小程序组件   wxcomponents
App（不含 nvue）   支持微信小程序组件   wxcomponents
微信小程序   支持微信小程序组件   wxcomponents
支付宝小程序   支持支付宝小程序组件   mycomponents
百度小程序   支持百度小程序组件   swancomponents
字节跳动小程序   支持字节跳动小程序组件   ttcomponents
QQ 小程序   支持 QQ 小程序组件   wxcomponents

使用方式

在项目根目录下的 pages.json 文件中，在页面属性 styles 中增加下面的设置。
实例：

{
"path" : "index/index",
"style":{
"usingComponents":{
"custom":"/wxcomponents/custom/index"
"custom":"/swancomponents/custom/index"
"custom":"/mycomponents/custom/index"
}
}
}
在页面中使用实例:

<view>
<custom name="uni-app"></custom>
</view>

系统根据通常开发的情况，帮我们生成了这个项目目录。这些项目目录不是一成不变的，我们可以按需使用，也可以自己继续在这个目录中新建文件夹。本节主要介绍了 uni-app 项目目录，重点如下：

使用 uni-ui 模式创建项目时，项目目录以及各个文件夹的作用；
使用 Hello uni-app 模式创建项目时，项目目录以及各个文件夹的作用；
各个平台小程序组件存放目录以及使用方式。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!