uniapp 目录

uniapp 目录结构

uniapp 项目遵循标准目录结构，便于开发和管理。以下为常见目录及其用途：

根目录

• pages：存放页面文件，每个页面为一个文件夹，包含 .vue、.js、.json 文件。
• static：存放静态资源（图片、字体等），打包时会原封不动复制到输出目录。
• components：存放可复用的 Vue 组件。
• uni_modules：存放通过 HBuilderX 安装的插件或模块。
• common：存放公共代码（工具函数、常量等）。
• store：存放 Vuex 状态管理文件（可选）。
• manifest.json：应用配置，如 AppID、启动页面、权限等。
• pages.json：路由和页面样式配置，定义页面路径、导航栏样式等。
• App.vue：应用入口组件，可设置全局样式和生命周期。
• main.js：应用入口文件，初始化 Vue 实例。

关键目录说明

pages 目录

• 每个子目录代表一个页面，需在 pages.json 中注册。
• 示例：

  pages/
    ├── index/
    │   ├── index.vue    // 页面组件
    │   ├── index.js     // 页面逻辑（可选）
    │   └── index.json   // 页面配置（可选）
    └── detail/
        └── detail.vue

static 目录

• 资源文件需通过相对路径引用，例如 /static/logo.png。
• 注意：小程序中部分静态资源需通过特定方式引入（如字体文件）。

components 目录

• 组件命名建议使用驼峰式（如 myComponent.vue）。
• 全局组件需在 main.js 中注册：

  import myComponent from '@/components/myComponent.vue';
  Vue.component('my-component', myComponent);

配置文件示例

pages.json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarBackgroundColor": "#007AFF"
  }
}

manifest.json

{
  "name": "MyApp",
  "appid": "__UNI__XXXXXX",
  "description": "Demo"
}

注意事项

• 非静态资源（如需要编译的 SCSS 文件）建议放在 src 或 assets 目录（需自行创建）。
• 小程序平台对文件大小和类型有限制，需优化 static 资源。
• 使用 @/ 别名代表项目根目录，避免路径混乱。