|-- components/ # 存放可复用组件的目录
| `-- comp-a.vue # 可复用组件 a
|
|-- pages/ # 存放业务页面的目录
| |-- index/ # 存放 index 页面的目录
| | `-- index.vue # index 页面组件
| `-- list/ # 存放 list 页面的目录
| `-- list.vue # list 页面组件
|
|-- static/ # 存放应用引用的静态资源(如图片、视频等)的目录,注意只能存放于此
| `-- ...
|
|-- main.js # Vue 初始化入口文件
|
|-- App.vue # 应用配置文件,用来配置全局样式和生命周期函数等
|
|-- manifest.json # 配置应用名称、AppId、logo、版本等打包信息
|
`-- pages.json # 配置页面路径、页栈等页面相关信息
项目结构:
Uniapp项目包含如下文件夹:
- unpackage: 存储打包后生成的文件,包括各个平台的app。
- dist:存放小程序原生代码,即不经过打包的代码所在目录。
- src:存放我们进行开发的源代码,一些第三方工具及图片等素材也可以放置在该目录下。
- static:存放静态资源文件,例如图片、字体、小程序云开发配置文件等。
- pages:存放uni-app中的所有页面组件,每个页面都是由Vue模板组合而成。
代码构成:
- App.vue: 是整个Uniapp应用程序的入口文件,它使用Vue.js组件来描述应用程序的界面元素和逻辑处理方法。其中,<template>标签描述了界面元素,<script>标签是Vue.js组件处理的逻辑,<style>标签是组件的样式表代码。
- main.js:主入口文件,负责初始化Vue实例,加载全局路由和插件,配置网络请求等全局配置。
- pages目录:存放了Uniapp中的所有页面组件(注意,这里指的是业务逻辑代码,而不是UI组件,UI组件是可以复用的)。每个页面是一个独立的vue文件,由Vue模板构成,负责描述该页面的布局、样式和逻辑处理。
- components目录:存放可复用的UI组件,实现了常见的UI控件,诸如按钮、表单、布局、列表等内容,我们可以在不同的页面组件中引用它们来避免重复编写大量代码。
- unpackage目录:包含平台特定打包版本的应用程序代码,这些代码使用原生API发布在各自的应用商店中。