uniapp组织结构图
uniapp 项目结构概述
uniapp 采用基于 Vue.js 的目录结构，同时支持多端（H5、小程序、App 等）开发。以下是典型项目的核心目录和文件组织方式：
目录结构解析
根目录
pages：页面目录，每个页面为一个子目录，需在pages.json中注册。static：静态资源（如图片、字体），直接引用无需打包处理。components：可复用组件，遵循 Vue 组件规范。uni_modules：插件模块，通过官方插件市场安装的依赖存放于此。common：公共工具（如utils.js）、样式（如common.css）。App.vue：应用入口组件，全局生命周期和样式。main.js：应用入口文件，初始化 Vue 实例。pages.json：配置页面路由、导航栏、底部 Tab 等。manifest.json：配置应用名称、图标、权限等多端差异化信息。
关键文件说明
pages.json
定义页面路径、窗口样式、路由导航。示例配置：
{
"pages": [
{ "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }
],
"tabBar": {
"list": [
{ "pagePath": "pages/index/index", "text": "首页" }
]
}
}manifest.json
配置多端适配参数，如微信小程序的 appid 或 App 的启动图：
{
"mp-weixin": {
"appid": "your-wechat-appid"
},
"app": {
"backgroundTextStyle": "dark"
}
}组件与页面关系
- 页面：位于
pages目录，通过pages.json注册路由，每个页面包含.vue文件（模板、逻辑、样式）。 - 组件：位于
components目录，通过import引入页面或其他组件中复用。
示例页面引用组件：
<template>
<view>
<custom-header title="首页"></custom-header>
</view>
</template>
<script>
import customHeader from '@/components/custom-header.vue';
export default {
components: { customHeader }
};
</script>多端适配策略
- 条件编译：通过注释语法实现代码按平台生效。
// #ifdef H5 console.log('仅H5生效'); // #endif - 平台专属文件：如
index.vue和index.nvue（App 原生页面）。
插件与模块化
- uni_modules：官方插件市场安装的模块自动存放于此，按需引入。
- npm 支持：通过
npm install安装的依赖可在项目中使用，需注意跨平台兼容性。
通过合理组织目录和配置，uniapp 项目可高效维护并适配多端平台。
