当前位置:首页 > uni-app

uniapp 目录

2026-01-13 20:22:20uni-app

uniapp 目录结构

uniapp 的目录结构遵循 Vue.js 项目的规范,同时包含一些特有的文件和目录。以下是典型的 uniapp 项目目录结构及其说明:

project-name/
├── .hbuilderx/             # HBuilderX 项目配置文件(可选)
├── .vscode/               # VSCode 配置文件(可选)
├── node_modules/          # 项目依赖包
├── pages/                 # 页面目录,每个页面是一个文件夹
│   ├── index/             # 示例页面
│   │   ├── index.vue      # 页面组件
│   │   └── index.json     # 页面配置文件
├── static/                # 静态资源目录(图片、字体等)
├── unpackage/            # 编译生成的文件目录
├── App.vue                # 应用入口组件
├── main.js                # 应用入口文件
├── manifest.json          # 应用配置文件
├── pages.json            # 页面路由和导航栏配置
├── uni.scss              # 全局样式文件
└── package.json          # 项目配置文件

核心目录和文件说明

pages/

  • 存放所有页面文件,每个页面是一个单独的文件夹。
  • 每个页面通常包含 .vue 文件(页面组件)、.json 文件(页面配置)和可选的 .scss 文件(页面样式)。

static/

  • 存放静态资源文件,如图片、字体、音频等。
  • 这些文件会被直接复制到编译后的项目中,不会被 webpack 处理。

unpackage/

  • 编译后的文件存放目录,包括各平台的打包结果。
  • 该目录通常会被忽略(通过 .gitignore)。

App.vue

  • 应用的根组件,所有页面都会继承该组件的样式和行为。
  • 可以在这里定义全局样式或生命周期钩子。

main.js

uniapp 目录

  • 应用的入口文件,负责初始化 Vue 实例和加载插件。

manifest.json

  • 应用配置文件,包含应用名称、图标、启动页等元信息。
  • 支持多平台配置,如微信小程序、H5、App 等。

pages.json

  • 页面路由和导航栏配置文件。
  • 定义页面路径、窗口样式、底部导航栏等。

uni.scss

uniapp 目录

  • 全局样式文件,可以定义 SCSS 变量和混合宏。
  • 其他样式文件可以通过 @import 引入这些变量。

其他常见目录

components/

  • 存放可复用的 Vue 组件。
  • 组件可以通过 import 在页面中使用。

store/

  • 存放 Vuex 状态管理文件(如果使用 Vuex)。
  • 通常包含 index.js 和模块化的状态文件。

common/

  • 存放公共工具函数、常量或混入(mixins)。
  • 例如 utils.jsapi.js 等。

platforms/

  • 存放平台特定的代码(可选)。
  • 例如针对微信小程序或 H5 的特殊逻辑。

注意事项

  • 静态资源尽量放在 static/ 目录,避免被 webpack 处理。
  • pages/ 目录下的页面需要先在 pages.json 中注册才能访问。
  • manifest.jsonpages.json 是 uniapp 特有的配置文件,需按规范编写。
  • 编译后的文件会生成在 unpackage/ 目录,无需手动修改。

标签: 目录uniapp
分享给朋友:

相关文章

uniapp开发电视应用

uniapp开发电视应用

开发环境准备 确保已安装HBuilderX最新版本,这是uniapp官方推荐的开发工具。安装Node.js环境,用于依赖管理和打包构建。准备Android Studio或Xcode用于调试和打包TV应…

uniapp模板库

uniapp模板库

uniapp模板库推荐 官方模板库 uni-app官方提供多个模板,涵盖电商、社交、新闻等多个领域。这些模板可直接在HBuilderX中通过新建项目选择,包含基础结构和常用功能模块,适合快速启动项目。…

uniapp swiper禁止滑动

uniapp swiper禁止滑动

禁用 Swiper 滑动的方法 在 UniApp 中,可以通过设置 disableTouch 属性或动态绑定 touchable 属性来禁止 Swiper 组件的滑动行为。 方法一:通过 disab…

混合uniapp

混合uniapp

混合 UniApp 开发模式 混合 UniApp 开发通常指将 UniApp 与其他原生技术(如原生 iOS/Android 或 Flutter)结合使用,以兼顾跨平台效率和原生性能。以下是常见的混合…

uniapp编译结果

uniapp编译结果

uniapp编译结果 uniapp的编译结果会根据目标平台不同而生成不同的输出文件。以下是主要平台的编译结果说明: H5平台 编译后会生成一个/dist/build/h5目录,包含标准的HTML5应…

uniapp打卡日期

uniapp打卡日期

实现打卡日期的基本方法 在UniApp中实现打卡日期功能,可以通过<calendar>组件或自定义日期选择器完成。官方推荐使用第三方日历组件如uni-calendar,需通过HBuilde…