uniapp的项目结构

时间:2021年07月04日

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


uniappJL  项目部署目录
├─common           应用目录
│  ├─util.js      函数库
│  ├─ ...           更多函数库
├─components           子组件目录
│              
│  ├─uni-badge          uni-badge组件目录
│  │  └─uni-badge.vue       组件文件
│  ├─...         更多组件
│
├─pages          组件目录
│  ├─index       index组件目录
│     └─index.vue  index组件文件
│  └─ ...   
│
├─uni_modules    插件目录
│  ├─u-clipboard 插件
│  └─...
│
├─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": [ 
		{
			"path": "pages/index/index",
			"style": {
				
			}
		}
	]	

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


子组件的加载


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


js部分

import uniBadge from "@/components/uni-badge/uni-badge"
export default {
	components:{
		uniBadge
	}
}

view部分

<uni-badge></uni-badge>


最新文章
热点文章