Uniapp项目中引入图鸟UI库

安装插件

参考文档：https://docs.ahuaaa.cn/components/install.html

从插件市场导入图鸟UI：https://ext.dcloud.net.cn/plugin?id=7088

创建项目

创建一个新项目叫：图鸟UI测试

导入依赖

将libs目录，static目录，store目录，tuniao-ui目录从图鸟UI模板的文件夹复制到图鸟UI测试的文件夹：

配置UI

修改main.js，导入图鸟UII和状态管理器：

import App from './App'

import Vue from 'vue'

// 引入全局TuniaoUI

import TuniaoUI from 'tuniao-ui'

// 引入store

import store from './store'

// 引入TuniaoUI提供的vuex简写方法

let vuexStore = require('@/store/$tn.mixin.js')

Vue.use(TuniaoUI)

Vue.mixin(vuexStore)

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({

store,

...App

})

app.$mount()

在uni.scss的顶部导入图鸟UI的主体样式：

@import 'tuniao-ui/theme.scss';

在App.vue中，导入图鸟UI相关的样式：

/*每个页面公共css */

@import './tuniao-ui/index.scss';

@import './tuniao-ui/iconfont.css';

在pages.json中配置图鸟UI的easycom：

{

"easycom": {

"^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"

},

"pages": ...

}

在pages/index/index.vue中，使用图鸟UI的组件：

点击进行登录

运行测试

在内置浏览器运行并预览项目：

可以发现，图鸟UI的组件和样式都已生效。

总结