Project directory structure analysis

Project Directory Structure Analysis

The directory structure of a uni-app project follows Vue.js conventions while adding uni-app-specific directories and files. Understanding the purpose of these directories and files helps in better organizing code and developing applications.

Basic Directory Structure

A typical uni-app project directory looks like this:

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

Core Directories Explained

pages Directory

The pages directory stores all page files, with each page consisting of .vue, .js, and .json files:

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

Example of a page file:

<!-- pages/index/index.vue -->
<template>
  <view>
    <text>Home Page Content</text>
  </view>
</template>

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

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

components Directory

The components directory stores reusable components:

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

Example of a component:

<!-- 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 Directory

The static directory stores static resources such as images and fonts:

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

Configuration Files

pages.json

pages.json is a uni-app-specific configuration file used to set page paths, window behavior, navigation bar styles, etc.:

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

manifest.json

manifest.json is the application configuration file used to set the app name, appid, version, etc.:

{
  "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
    }
  }
}

Special Files

App.vue

App.vue is the application entry file, where you can set global styles and lifecycle methods:

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

<style>
/* Global styles */
page {
  background-color: #f4f4f4;
}
</style>

main.js

main.js is the Vue initialization entry file:

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

Vue.config.productionTip = false

App.mpType = 'app'

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

Other Important Directories

common Directory

The common directory typically stores public utility functions, constants, etc.:

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

Example of a utility function:

// 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 Directory

The store directory is used for Vuex state management files:

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

Example of 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
})

Platform-Specific Directories

uni-app supports creating platform-specific code:

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

Example of a platform-specific component:

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

uni_modules Directory

uni_modules is the plugin module directory for uni-app:

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

Development Environment Directories

.hbuilderx and .idea are IDE configuration directories, which usually do not require manual modification:

.hbuilderx/
└── project.config.json

Build-Related Files

package.json defines project dependencies and scripts:

{
  "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"
  }
}