uni-app默认使用uni-ui全端兼容的、高性能UI框架,在我们开发过程中可以满足大部分的需求了,并且如果是为了兼容性,还是强烈建议使用uni-ui作为UI框架使用。
如果作为初创公司,自身又不想费太多精力去自己设计一套UI框架,那么DCloud插件市场提供了很多优秀的UI框架,最重要的是有些UI框架能够提供一整套行业的页面模板,比如,前几年电商项目比较火,Vant、ColorUI等提供了一整套电商模板方案,界面设计非常精美。
项目之前使用过ColorUI,可惜的是ColorUI已经好久没更新了,后续是否能够继续更新还是个未知数,最近刚好要做一个类似于论坛圈子的移动应用,在DCloud插件市场找到了界面设计美观、基础组件丰富的图鸟UI和图鸟模板-圈子,接下来以图鸟UI为例介绍如何在uni-app项目中集成第三方UI并实现登录注册功能。
以下部分内容参考图鸟UI官方部署文档
官方插件搜索下载,我这里是直接使用HBuilderX导入插件,可以方便预览插件,复制文件操作也可以在HBuilderX中进行,相比较下载ZIP会方便一点。
......
const store = new Vuex.Store({
......
})
......
export default store
index.js
......
import tuniao from './modules/tuniao'
......
modules: {
user,
tuniao
},
......
在gitegg-uni-app-v2项目根目录中的main.js中,引入并使用TuniaoUI的JS库,注意这两行配置代码要放在import Vue之后。
// 引入全局TuniaoUI主JS库
import TuniaoUI from 'tuniao-ui'
Vue.use(TuniaoUI)
在gitegg-uni-app-v2项目根目录的uni.scss中引入tuniao-ui/theme.scss文件。
@import 'tuniao-ui/theme.scss';
修改page.json文件,增加easycom组件配置,确保pages.json中只有一个easycom字段。
easycom组件模式:传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。
// pages.json
{
"easycom": {
"^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"
},
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
// ......
}
]
// ......
}
上面的操作将图鸟UI基础库的内容复制集成到了我们的uni-app项目中,我们在实际开发过程中可能并不需要所有的页面模板文件,否则会使程序多了很多无用代码。
Gitee:
https://gitee.com/wmz1930/GitEgg
GitHub:
https://github.com/wmz1930/GitEgg