Uniapp整合ColorUI进行项目开发

最新推荐文章于 2026-06-27 19:46:40 发布

原创最新推荐文章于 2026-06-27 19:46:40 发布 · 1.4k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何利用VUE CLI 3.0 和 uni-simple-router 搭建Uniapp项目，并详细阐述了如何整合ColorUI，包括在main.js中全局注册css，在app.vue中导入样式，设置路由以及配置请求插件luch-request。最后展示了配置完成后运行的页面效果。

Uniapp整合ColorUI进行项目开发

构建工具：

VUE CLI 3.0 https://vue3js.cn/docs/zh/guide/migration/introduction.html
uni-simple-router https://hhyang.cn/v2/

1.使用Hbuilder新建uni-app 项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wv3Ll65J-1618683034675)(file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg)]

2.导入colorUI组件 https://www.color-ui.com/

3.整合colorUI

3.1 main.js 全局注册css

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0LK3BADV-1618683034679)(file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image004.jpg)]

3.2 app.vue 导入css

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v0qcnQbo-1618683034681)(file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image006.jpg)]

4.导入路由组件router，也可以使用原生跳转方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LBRXqfk9-1618683034684)(file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image008.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AK4rJCUG-1618683034686)(file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image010.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TPUAcdUc-1618683034687)(file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image012.jpg)]

…

根据官网指引，完成即可。

5.配置request请求，uniapp内置了请求方式，但是太原始

推荐插件：luch-request https://www.quanzhan.co/luch-request/handbook/#%E4%BB%8B%E7%BB%8D

。。。

根据官网方式或者DCloud搜索导入即可使用。

全局定义api地址，及http请求方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hUtLAjDC-1618683034689)(file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image014.jpg)]

配置完成后，添加页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MICuWmH8-1618683034689)(file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image016.jpg)]

<template>

    <view>

       <home v-if="PageCur=='home'"></home>

       <shop v-if="PageCur=='shop'"></shop>

       <my v-if="PageCur=='my'"></my>

       <businessSchool v-if="PageCur=='businessSchool'"></businessSchool>

       <view class="cu-bar tabbar bg-white shadow foot">

           <view class="action" @click="NavChange" data-cur="home">

              <view class='cuIcon-cu-image'>

                  <image :src="'/static/tabbar/basics' + [PageCur=='home'?'_cur':''] + '.png'"></image>

              </view>

              <view :class="PageCur=='home'?'text-green':'text-gray'">主页</view>

           </view>

           <view class="action" @click="NavChange" data-cur="shop">

              <view class='cuIcon-cu-image'>

                  <image :src="'/static/tabbar/component' + [PageCur == 'shop'?'_cur':''] + '.png'"></image>

              </view>

              <view :class="PageCur=='shop'?'text-green':'text-gray'">商城</view>

           </view>

           <view class="action" @click="NavChange" data-cur="businessSchool">

              <view class='cuIcon-cu-image'>

                  <image :src="'/static/tabbar/component' + [PageCur == 'businessSchool'?'_cur':''] + '.png'"></image>

              </view>

              <view :class="PageCur=='businessSchool'?'text-green':'text-gray'">商学院</view>

           </view>

           <view class="action" @click="NavChange" data-cur="my">

              <view class='cuIcon-cu-image'>

                  <image :src="'/static/tabbar/plugin' + [PageCur == 'my'?'_cur':''] + '.png'"></image>

              </view>

              <view :class="PageCur=='my'?'text-green':'text-gray'">个人</view>

           </view>

       </view>

    </view>

</template>

 

<script>

    export default {

       data() {

       return {

              PageCur: 'home'

           }

       },

       methods: {

           NavChange: function(e) {

              this.PageCur = e.currentTarget.dataset.cur

           }

       }

    }

</script>

<style>

</style>