uniapp的项目结构

时间:2021年07月04日

uniapp的顶目的主要结构大致如下


uniappJL  项目部署目录\n├─common           应用目录\n│  ├─util.js      函数库\n│  ├─ ...           更多函数库\n├─components           子组件目录\n│              \n│  ├─uni-badge          uni-badge组件目录\n│  │  └─uni-badge.vue       组件文件\n│  ├─...         更多组件\n│\n├─pages          组件目录\n│  ├─index       index组件目录\n│     └─index.vue  index组件文件\n│  └─ ...   \n│\n├─uni_modules    插件目录\n│  ├─u-clipboard 插件\n│  └─...\n│\n├─pages.json  pages.json配置文件


君兰IT平台提供的uniapp前端组件分为父组件和子组件。


父组件


父组件也可以称为模板,页面的主要组成部分如index/index.vue(包含index目录和index.vue文件),父组件放在pages目录下。


子组件


子组件是一个单独且可复用的功能模块的封装,如上面目录结构的uni-badge/uni-badge.vue(uni-badge为目录,uni-badge.vue为文件),子组件放在components目录下。


配置文件


把父组件扔到pages目录后,需要在pages.json进行相应的配置,如index/index.vue的配置如下

"pages": [ \n		{\n			"path": "pages/index/index",\n			"style": {\n				\n			}\n		}\n	]	

运行前,父组件必须作相应的pages.json配置,子组件不用。


子组件的加载


如我们要加载uni-badge子组件,在需要的页面引入


js部分

import uniBadge from "@/components/uni-badge/uni-badge"\nexport default {\n	components:{\n		uniBadge\n	}\n}

view部分

<uni-badge></uni-badge>


最新文章
热点文章