项目目录结构解析

项目目录结构解析

uni-app 项目目录结构遵循 Vue.js 的约定，同时增加了 uni-app 特有的目录和文件。了解这些目录和文件的用途，有助于更好地组织代码和开发应用。

基础目录结构

一个典型的 uni-app 项目目录如下：

├── .hbuilderx
├── .idea
├── node_modules
├── src
│   ├── common
│   ├── components
│   ├── pages
│   ├── static
│   ├── store
│   ├── App.vue
│   ├── main.js
│   ├── manifest.json
│   ├── pages.json
│   └── uni.scss
├── package.json
└── README.md

核心目录详解

pages 目录

pages 目录存放所有页面文件，每个页面由 .vue 文件、.js 文件和 .json 文件组成：

pages/
├── index/
│   ├── index.vue
│   ├── index.js
│   └── index.json
└── detail/
    ├── detail.vue
    ├── detail.js
    └── detail.json

页面文件示例：

<!-- pages/index/index.vue -->
<template>
  <view>
    <text>首页内容</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello'
    }
  }
}
</script>

<style>
text {
  color: #42b983;
}
</style>

components 目录

components 目录存放可复用的组件：

components/
├── button.vue
└── card.vue

组件示例：

<!-- components/button.vue -->
<template>
  <button class="my-button" @click="handleClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
.my-button {
  background-color: #007aff;
  color: white;
}
</style>

static 目录

static 目录存放静态资源，如图片、字体等：

static/
├── images/
│   ├── logo.png
│   └── banner.jpg
└── fonts/
    └── iconfont.ttf

配置文件

pages.json

pages.json 是 uni-app 特有的配置文件，用于配置页面路径、窗口表现、导航栏样式等：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "详情页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

manifest.json

manifest.json 是应用配置文件，用于配置应用名称、appid、版本等：

{
  "name": "MyApp",
  "appid": "__UNI__123456",
  "description": "",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,
  "app-plus": {
    "usingComponents": true
  },
  "mp-weixin": {
    "appid": "wx1234567890",
    "setting": {
      "urlCheck": false
    }
  }
}

特殊文件

App.vue

App.vue 是应用入口文件，可以在这里设置全局样式和生命周期：

<script>
export default {
  onLaunch: function() {
    console.log('App Launch')
  },
  onShow: function() {
    console.log('App Show')
  },
  onHide: function() {
    console.log('App Hide')
  }
}
</script>

<style>
/* 全局样式 */
page {
  background-color: #f4f4f4;
}
</style>

main.js

main.js 是 Vue 初始化入口文件：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

其他重要目录

common 目录

common 目录通常存放公共工具函数、常量等：

common/
├── utils.js
└── constants.js

工具函数示例：

// common/utils.js
export function formatDate(date) {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${year}-${month}-${day}`
}

store 目录

store 目录用于存放 Vuex 状态管理相关文件：

store/
├── index.js
├── actions.js
├── mutations.js
└── getters.js

Vuex 示例：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'

Vue.use(Vuex)

const state = {
  count: 0
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

平台特定目录

uni-app 支持为不同平台创建特定代码：

src/
├── platforms/
│   ├── mp-weixin/
│   ├── h5/
│   └── app-plus/

平台特定组件示例：

platforms/
└── mp-weixin/
    └── components/
        └── weixin-button.vue

uni_modules 目录

uni_modules 是 uni-app 的插件模块目录：

uni_modules/
├── uni-xxx/
│   ├── components/
│   ├── static/
│   └── package.json

开发环境目录

.hbuilderx 和 .idea 是 IDE 的配置文件目录，通常不需要手动修改：

.hbuilderx/
└── project.config.json

构建相关文件

package.json 定义了项目依赖和脚本：

{
  "name": "my-uni-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
    "build": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build"
  },
  "dependencies": {
    "vue": "^2.6.11",
    "vuex": "^3.4.0"
  }
}