uniapp

.在HBuilderX中新建uni-app

新建uni-app项目.jpg

2.项目初始目录结构

初始目录结构

3.调整项目目录结构如下图

image.png

4.配置pages.json文件

{"pages": [        {"path":"pages/index/index","style": {"navigationBarTitleText":"主页"}        },        {"path":"pages/ucenter/ucenter","style": {"navigationBarTitleText":"我的"}        },        {"path":"pages/ucenter/setting","style": {"navigationBarTitleText":"个人设置"}        }    ],"tabBar": {"color":"#000000","selectedColor":"#2F85FC","backgroundColor":"#FFFFFF","borderStyle":"black","list": [            {"pagePath":"pages/index/index","iconPath":"static/home.png","selectedIconPath":"static/home-active.png","text":"主页"},            {"pagePath":"pages/ucenter/ucenter","iconPath":"static/center.png","selectedIconPath":"static/center-active.png","text":"我的"}        ]    },"globalStyle": {"navigationBarTextStyle":"white","navigationBarBackgroundColor":"#2F85FC","backgroundColor":"#FFFFFF"}}

5.简单写一下index.vue和ucenter.vue内容

index.vue

主页,{{ title }}exportdefault{    data() {return{title:'Hello'};    },    onLoad() {},methods: {}};.container{width:95%;margin:0auto;text-align: center;}.title{font-size:36upx;color:#8f8f94;}

ucenter.vue

{{ name }}的个人中心设置exportdefault{    data() {return{name:'陶然然'};    },    onLoad() {},methods: {}};.container{width:95%;margin:0auto;text-align: center;}

作者：陶然然_niit

链接：https://www.jianshu.com/p/50571965c9d8

来源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。