uniapp 文件列表

uniapp 文件列表结构

uniapp 的项目文件结构遵循一定的规范，以下是一个典型的 uniapp 项目文件列表及其说明：

项目根目录

• pages.json：页面路由配置文件，定义所有页面路径、窗口样式、导航栏样式等。
• manifest.json：应用配置信息，包括应用名称、图标、启动页面等，用于打包成不同平台的应用。
• App.vue：应用入口文件，全局生命周期和样式在此定义。
• main.js：应用主入口文件，初始化 Vue 实例并引入全局插件。
• uni.scss：全局 SCSS 变量文件，可在项目中复用样式变量。

页面目录

• pages/：存放所有页面文件，每个页面为一个文件夹，包含 .vue 文件。
  • 示例：pages/index/index.vue 表示首页。
• static/：静态资源目录，存放图片、字体等文件。
  • 示例：static/logo.png 可在项目中直接引用。

组件目录

• components/：存放全局或局部组件，每个组件为一个 .vue 文件。
  • 示例：components/button.vue 可被多个页面引用。

其他目录

• common/：存放公共工具函数、常量等。
  • 示例：common/utils.js 封装公共方法。
• uni_modules/：存放通过 HBuilderX 插件市场安装的模块。
• unpackage/：打包后生成的目录，存放各平台编译后的文件。

关键文件说明

pages.json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black"
  }
}

manifest.json

{
  "name": "MyApp",
  "appid": "__UNI__XXXXXX",
  "description": "A uniapp project"
}

App.vue

<script>
export default {
  onLaunch() {
    console.log('App Launch');
  }
}
</script>

<style>
/* 全局样式 */
</style>

静态资源引用

在 .vue 文件中引用静态资源：

<template>
  <image src="/static/logo.png"></image>
</template>

注意事项

• 页面路径需在 pages.json 中注册才能访问。
• 静态资源建议放在 static/ 目录，直接通过路径引用。
• 组件需手动引入或在 easycom 配置中自动引入。

通过以上文件结构和配置，可以快速搭建一个完整的 uniapp 项目。