2025 后端自学UNIAPP【项目实战：旅游项目】2、安装下载引用前端UI框架：uview-plus

一、uview-plus官网地址，有详细介绍，感兴趣的可以深入了解学习

介绍 | uview-plus – 全面兼容nvue/鸿蒙/uni-app-x的uni-app生态框架 – uni-app UI框架uview-plus，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水http://uview-plus.jiangruyi.com/components/intro.html

二、Hbuilder X 方式安装下载引入uview-plus

1、进入该网址，点击下载插件并导入Hbuilder X

（注意：需要登录账号才可以下载，第一次使用需要按步骤注册账号）

2、勾选上自己的项目，就会开始下载，直到提示下载成功

三、scss/sass插件下载与安装

官网介绍

1、由`HBuilder X`创建的项目，已经安装scss插件【有了直接跳过②】

如图所示：第三行scss/sass编译

2、如果没有，请按图的步骤一步一步来安装，顶部菜单—–>工具—->插件安装—–>安装新插件—–>前往插件市场安装（会跳转到dcloud插件市场）—–>文字搜索：scss/sass编译—->点击进详情—–>点击下载插件并导入Hbuilder X —->右下角会有下载弹窗—–>下载完成之后重启软件

再进行：顶部菜单—–>工具—->插件安装，就会看到已经安装好的scss/sass编译

四、配置文件

1、引入uview-plus主JS库

import uviewPlus from ‘@/uni_modules/uview-plus’

 app.use(uviewPlus)

2、在uni.scss中引入uview-plus的全局SCSS

请注意uni.scss是一个特殊文件，万万不可将其它样式比如uview-plus/index.scss引入至uni.scss中

@import ‘@/uni_modules/uview-plus/theme.scss’;

3、引入uview-plus基础样式

/* 注意要写在第一行，注意不能引入至uni.scss，同时给style标签加入lang=”scss”属性 */
@import “@/uni_modules/uview-plus/index.scss”;

4、manifest.json中增加mergeVirtualHostAttributes配置

	"mergeVirtualHostAttributes" : true

5、再pages.json中添加代码来配置easycom组件模式

官网说明：uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。

// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
“^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”

五、安装依赖库 dayjs和cliphoard

（如果最后还没有效果，可以重新安装这两个依赖）

npm i dayjs

npm i clipboard

这个位置打开内置终端，然后在执行以上的两条命令

⑥

六、在pages/inde/index.vue页面中，测试并使用uview-plus的组件：加载中按钮组件

官网组件介绍，自己想试试其他的也可以

Button 按钮 | uview-plus – 全面兼容nvue/鸿蒙/uni-app-x的uni-app生态框架 – uni-app UI框架uview-plus，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水http://uview-plus.jiangruyi.com/components/button.html

1、在index.vue中测试使用按钮组件

<up-button type=”primary” text=”确定”></up-button>
<up-button type=”primary” :plain=”true” text=”镂空”></up-button>
<up-button type=”primary” :plain=”true” :hairline=”true” text=”细边”></up-button>
<up-button type=”primary” :disabled=”disabled” text=”禁用”></up-button>
<up-button type=”primary” loading loadingText=”加载中”></up-button>
<up-button type=”primary” icon=”map” text=”图标按钮”></up-button>
<up-button type=”primary” shape=”circle” text=”按钮形状”></up-button>
<up-button text=”渐变色按钮” color=”linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))”></up-button>
<up-button type=”primary” size=”small” text=”大小尺寸”></up-button>
import { ref } from ‘vue’;
const disabled = ref(true);
/* 注意要写在第一行，注意不能引入至uni.scss，同时给style标签加入lang=”scss”属性 */
@import “@/uni_modules/uview-plus/index.scss”;