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 项目可高效维护并适配多端平台。