uniapp项目基础模板使用指南
uniapp项目基础模板使用指南
该方案通用与基于vue的web开发,不局限于app
- 内容描述:
- 1:项目目录说明
- 2:页面组织方式
- 3:全局api及vuex,及部分全局api说明
- 4: 开发中如何使用theme及css组织方式说明
- 项目目录说明
-
common - 用于存放静态css,css theme文件,非全局js文件
components - 用于存放自定义/外部组件
global - 用于存放全局api,vuex,page配置等全局内容
pages - 页面
static - 所有静态文件,如图片,音频,文字等
-
- 页面组织方式
-
问题:uniapp默认pages.json无法模块化,和nvue页面刷新无法热加载
方案:社区方案 - https://ext.dcloud.net.cn/plugin?id=1602。
基本使用说明:
1. 在pages.js设置主页
2. 新建页面不需要勾选底部在pages.json注册,直接在global/pages/modules/index.js中进行注册即可
-
- 全局api及vuex
-
问题:使用common设置api无法方便进行全局调用,nvue不支持原型挂载
解决方案:自动挂载至vuex中进行全局调用
基本使用说明:
1.在global/common中定义api或者变量
2.页面中:this.$store.xxxx
3.vuex使用与官网一致
-
- 预设全局api说明
-
1.getBox - 默认type = 1, 1用于获取高度style子串,2用于获取宽度与高度相等的style字串,else用于获取计算的px数值,公式模仿npro计算公式
2.getColor - 需传颜色class,会根据主题进行后缀添加,返回class数组
3.getIcon - 预设选用了ant design icon,具体icon表请查看 iconfont
4.to - 用于跳转页面
- 如何使用theme及css组织方式说明
-
1.css说明
如果需要修改scss内容请转换为普通css内容再放入,以免影响提示功能,而除了main主题外其他主题已给出范例,不需要转css,因为不需要这部分提示
free.scss - 基础库一般不允许修改,这次改进了free.scss内容,保证了多端一致性
common.scss - 用于存放非颜色的项目css class
theme/theme.scss - 用于引入主题
theme/main.scss - 默认主题
theme/xxxx.scss - 其他主题,如dark.scss
2.theme使用
在main.scss中定义 .a {}
在dark.scss中定义 .a_dark {}
vue中使用getColor('a')获取class即可
-
- 感谢您的阅读,如果有误,或者其他问题,请回复
- 如使用本预设项目,请认真查看free.scss内容
- 如有其他好的想法请留言联系