当前位置：首页 > news >正文

uniapp中使用uview-plus

news 2026/4/26 17:20:02

安装uview-plus

uview-plus的官网地址

我们通过HBuilderX的方式进行下载
点击：下载地址：https://ext.dcloud.net.cn/plugin?name=uview-plus

配置uview-plus

在 main.js 中引入uviewPlus。然后使用这个库

// main.js
// 引入uviewPlus(新增)
import uviewPlus from '@/uni_modules/uview-plus'
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({...App
})
app.$mount()
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)// 使用uviewPlus这个库(新增)app.use(uviewPlus这个库)return {app}
}
// #endif

uni.scss文件中引入uview-plus的主题变量

// 引入uview-plus的全局SCSS主题变量
@import '@/uni_modules/uview-plus/theme.scss';

在App.vue文件中，引入uview-plus的全局样式类

<style lang="scss">
/* 注意要写在第一行，注意不能引入至uni.scss，同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-plus/index.scss";
/*每个页面公共css */
.com-box{width: 100%;height: 40rpx;background-color: aqua;
}
</style>

安装这2个库，因为时间组件有使用这2个库

安装后，会出现package.json文件和package-lock.json文件

npm i dayjs clipboard

配置easycom进行按需引入uview-plus

pages.json 文件下。进行如下配置

温馨提示
uni-app为了调试性能的原因，修改easycom规则不会实时生效，
配置完后，您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。
请确保您的pages.json中只有一个easycom字段，
否则请自行合并多个引入规则。

"easycom": {"autoscan": true,// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175"custom": {"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue","^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"}
},

//这是通过npm的方式进行配置的
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"//这是通过下载到本地的方式进行配置的
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
//这两者是有区别的，不知道各位小伙伴清楚不？