ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

HbuilderX使用Uniapp+Vue3安装uview-plus

2026/9/14 16:56:54 拓冰建站 浏览量
HbuilderX使用Uniapp+Vue3安装uview-plus

如果你是vue2版本想使用uniapp去配置uviewui库可以参考之前的文章
小程序的第三方ui库推荐较多的还是uview的,看起来比较美观,功能也比较完善,下面将提一下Vue3安装uview-plus库的教程

创建项目

在这里插入图片描述

安装

首先进入官网 uView-Plus

在这里插入图片描述
直接下载并导入
在这里插入图片描述
选择创建好的uniapp项目——确定即可
在这里插入图片描述
在这里插入图片描述

使用buildX工具点击这里 下载方式配置文档
在这里插入图片描述

安装scss和scss-loader

请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装

在这里插入图片描述

配置步骤

引入uview-plus主JS库
打开main.js,引入uview

import App from './App'
import uviewPlus from '@/uni_modules/uview-plus'// #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)app.use(uviewPlus)return {app}
}
// #endif

在uni.scss中引入样式

/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';

在这里插入图片描述
在App.vue中全局引入基础样式

<style lang="scss">/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */@import "@/uni_modules/uview-plus/index.scss";
</style>

在这里插入图片描述

结尾

最后测试即可

<template><u-action-sheet :list="list" v-model="show"></u-action-sheet><div v-for="(item,index) in list" :key="index"><u-button :text="item.text"></u-button></div></template><script setup>
import { ref } from 'vue';const list = ref([{text: 'Southern Wind',},{text: '按钮2'},{text: '按钮2'}
]);
const show = ref(true);
</script><style lang="scss"></style>

效果如下:
在这里插入图片描述想看效果可以先从浏览器中打开查看以及修改错误,h5样式会和小程序有一些差别,需要自行修改样式

H5:

在这里插入图片描述

小程序

在这里插入图片描述