[每天进步一点点~] uni-app colorUi使用教程

1.导入插件及配置

#从uni-app插件市场搜索colorUi，下载地址https://ext.dcloud.net.cn/plugin?id=239

导入插件到项目中或者下载插件压缩包

下载插件压缩包的，将压缩包解压后的colorui文件夹复制到项目根目录下；导入插件不用进行此步操作。

App.vue 引入关键Css main.css icon.css

2.使用colorUi里的组件

使用教程 https://ext.dcloud.net.cn/plugin?id=239

导航栏

使用colorUi里的导航栏，需要在 App.vue 进行如下配置：

pages.json 配置取消系统导航栏

"globalStyle": {
    "navigationStyle": "custom"
},

在main.js 引入 cu-custom 组件

import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)

在html页面直接复制组件代码过去即可，如 index.vue

    返回
    导航栏

底部导航栏使用

项目目录：

index.vue

/basics/home.vue

/me/home.vue

main.js 注册组件

import basics from './pages/basics/home.vue'
Vue.component('basics',basics)
import me from './pages/me/home.vue'
Vue.component('me',me)

效果图如下：

其他的组件也是复制代码，直接使用。