uniapp 小程序目录搭建
1. 分包结构
├──api 各个模块接口文件夹
├──login.js 登录模块接口文件
├──common 公共模块，包含公共基础css等
├──base.css 公共基础css
├──components 主包当中使用的组件或者复用率较高的组件作为全局组件
├──node_modules nodejs相关依赖包文件目录
├──pages 主包 : 业务页面文件存放的目录
├──common
├──sys index文件夹
├──home home文件夹
├──index.vue 主页面:欢迎页
├──index.scss
├──login login文件夹
├──index.vue 登录主页面
├──index.scss
├──user user文件夹
├──index.vue 个人中心主页面
├──index.scss
设备分包--------------------------------------------------------------------------------
├──pages_device 分包 : 设备相关业务页面文件存放的目录
├──components 设备分包中定义的的组件
├──static 分包静态资源
├──iconfont 分包中的图标
├──device 设备分包中定义的的组件
├──list
├──list.vue 设备列表页面
├──add
├──add.vue 新增设备页面
├──device_panel
├──device-panel.vue 设备面板页面
├──detail
├──device-detail.vue 设备信息详情页面
├──running-detail.vue 设备运行数据详情页面
├──FeedingData-report.vue 喂养数据报表页面
├──FeedingData-history.vue 喂养数据历史数据页面
├──settings
├──parameter-setting.vue 设备运行参数设置页面
用户分包--------------------------------------------------------------------------------
├──pages_user 分包 : 用户相关页面文件存放的目录
├──components 用户分包中定义的的组件
├──static 分包静态资源
├──iconfont 分包中的图标
├──user
├──device-distribution.vue 设备分配页面
├──change-password.vue 修改密码页面
├──settings.vue 系统设置页面
├──feedback.vue 意见反馈页面
├──help.vue 帮助中心页面
├──about.vue 关于我们页面
├──payment
├──payment.vue 支付页面
-----------------------------------------------------------------------------------------------------------------------------
├──static 存放应用引用的本地静态资源（如图片、视频等）的目录
├──iconfont 图标
├──images 图片资源
├──store vuex目录，也是存放公共属性方法的地方
├──index.js vuex的主文件
├──uni_modules 插件市场下载的第三方UI组件目录，存放[uni_module](https://www.cnblogs.com/uni_modules)规范的插件。
├──unpackage 打包目录，这里有各个平台的打包文件。
├──utils 全局公共方法目录
├──common.js 封装的公共可复用的方法属性文件（针对当前项目）
├──request.js 封装的公共请求方法文件
├──utils.js 封装的公共可复用的方法属性文件（针对所有项目）
├──App.vue 应用配置文件，用来配置App全局样式以及监听应用生命周期
├──main.js Vue初始化入口文件
├──manifest.json 配置应用名称、appid、logo、版本等打包信息的文件
├──package.json 项目配置信息文件，依赖模块的定义
├──package-lock.json 1.锁定包的版本，确保再次下载时不会因为包版本不同而产生问题2.加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址,重新安装时只需下载即可，不需要做额外的工作
├──pages.json 配置页面路由、导航条、选项卡等页面类信息的文件
├──uni.scss 自带的公共的css修饰文件
├──README.md 文档说明，可包含目录文件名称对比，注意事项，框架使用，技术架构，Git或SVN地址，账号密码等
2. 分包配置
// pages.json
{
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [{
"path": "pages/sys/login/index",
"style": {
"navigationBarTitleText": "登录",
"navigationStyle": "custom"
}
},
{
"path": "pages/sys/user/index",
"style": {
"navigationBarTitleText": "个人中心",
"navigationBarBackgroundColor": "#5b95ff",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/sys/home/index",
"style": {
"navigationBarTitleText": "工作台-首页",
"enablePullDownRefresh": true,
"app-plus": {
"pullToRefresh": {
"support": true,
"color": "#2979ff", //小圈圈的颜色
"style": "circle" //小圈圈的样式
}
}
}
}
],
"subPackages": [
// 设备分包
{
"root": "pages_device",
"pages": [{
"path": "device/add/add",
"style": {
"navigationBarTitleText": "设备-新增"
}
},
{
"path": "device/device_panel/index",
"style": {
"navigationBarTitleText": "设备面板",
"enablePullDownRefresh": true,
"app-plus": {
"pullToRefresh": {
"support": true,
"color": "#2979ff", //小圈圈的颜色
"style": "circle" //小圈圈的样式
}
}
}
}, {
"path": "device/list/list",
"style": {
//"navigationStyle": "custom", // 隐藏系统导航栏
"navigationBarTitleText": "设备列表",
"enablePullDownRefresh": false,
"app-plus": {
"pullToRefresh": {
"support": false,
"color": "#2979ff", //小圈圈的颜色
"style": "circle" //小圈圈的样式
}
}
}
}, {
"path": "device/setting/parameter-setting",
"style": {
"navigationBarTitleText": "设备运行设置",
"enablePullDownRefresh": false
}
}, {
"path": "device/detail/device-info",
"style": {
"navigationBarTitleText": "设备信息",
"enablePullDownRefresh": false
}
}, {
"path": "device/detail/running-detail",
"style": {
"navigationBarTitleText": "设备运行数据详情",
"enablePullDownRefresh": false
}
}, {
"path": "device/history/feedingData-report",
"style": {
"navigationBarTitleText": "喂养数据报表",
"enablePullDownRefresh": false
}
}, {
"path": "device/history/feedingData-history",
"style": {
"navigationBarTitleText": "喂养数据历史",
"enablePullDownRefresh": false
}
}
]
},
// 用户分包
{
"root": "pages_user",
"pages": [{
"path": "user/device-distribution",
"style": {
"navigationBarTitleText": "设备分配",
"enablePullDownRefresh": false
}
},
{
"path": "user/change-password",
"style": {
"navigationBarTitleText": "修改密码",
"enablePullDownRefresh": false
}
},
{
"path": "user/system-setting",
"style": {
"navigationBarTitleText": "系统设置",
"enablePullDownRefresh": false
}
},
{
"path": "user/feedback",
"style": {
"navigationBarTitleText": "意见反馈",
"enablePullDownRefresh": false
}
},
{
"path": "user/help",
"style": {
"navigationBarTitleText": "帮助中心",
"enablePullDownRefresh": false
}
},
{
"path": "user/about-us",
"style": {
"navigationBarTitleText": "关于我们",
"enablePullDownRefresh": false
}
},
{
"path": "payment/payment",
"style": {
"navigationBarTitleText": "支付",
"enablePullDownRefresh": false
}
}
]
}
],
// 分包预加载规则
"preloadRule": {
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "衡物联",
"navigationBarBackgroundColor": "#ffffff"
},
"tabBar": {
"color": "#333333",
"selectedColor": "#4094ff",
"backgroundColor": "#ffffff",
"borderStyle": "white",
"list": [{
"pagePath": "pages/sys/home/index"
},
{
"pagePath": "pages/sys/user/index"
}
]
}
}
分包配置注意事项
命名规范
文件命名规范,欢迎指正uniapp 开发规范
分包路径之间采用下划线的方式链接 如: pages_device
vue 文件命名采用连字符的方式 如 : user-settings.vue
分包结构
声明subpackages后,将按subpackages配置路径进行打包,subpackages配置路径外的目录将被打包到主包中
subpackage的根目录不能是另外一个subpackage内的子目录
tabBar页面必须在主包内
引用原则:
对于js、template、资源
packageA无法require packageB的,但可以require app、自己package内的(对于js文件:使用分包异步化时不受此条限制)
5350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
