uni-app - - - - - 使用uview-plus详细步骤

最新推荐文章于 2025-04-04 15:55:05 发布
最新推荐文章于 2025-04-04 15:55:05 发布
阅读量2.1k 收藏 17
点赞数 8
分类专栏： uni-app 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dark_programmer/article/details/141608108
版权

uni-app - - - - - 使用uview-plus详细步骤

1. 使用HbuilderX创建空白项目

在这里插入图片描述

2. 安装插件

工具 => 插件安装 => 前往插件市场安装 => 搜索插件并安装 => 下载插件并导入HbuilderX(选择准确需要导入uview-plus的项目)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
安装成功如下：
在这里插入图片描述

3. uview-plus配置使用

3.1 main.js配置

import uviewPlus from '@/uni_modules/uview-plus'


app.use(uviewPlus)

在这里插入图片描述

3.2 uni.scss配置

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

在这里插入图片描述

3.3 App.vue配置

@import "@/uni_modules/uview-plus/index.scss";

在这里插入图片描述

3.4 pages.json

"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"
		}
	},

在这里插入图片描述

4. 重启Hbuilderx

重启以后，重新运行到小程序，即可使用uView-plus

uView Plus 快速上手指南
mydd3的博客
02-12 955
**本指南适用于想要在 `uni-app`（Vue3 + Vite）项目中快速集成 `uView Plus` UI 组件库的开发者。** 内容涵盖： - 如何创建 `uni-app` 项目并安装 `uView Plus` - 详细的配置步骤，包括 `pages.json`、`main.js`、`App.vue` 等 - 常见组件示例，如图标、按钮等 - 解决组件不显示、样式不生效等常见问题 - 最佳实践、推荐工具及 AI 助手的高效使用方式
uniapp vue3安装 uview-plus3+
m0_69254007的博客
08-28 1305
注意：上面这个地方引入uview-plus会提示有错误，需要看第三步，修改env.d.ts文件。全局引入组件，不用每个文件都使用import导入了。注：依赖安装完成后需要重新启动项目才会起作用。
uniapp+vue3+vite+ts+uview-plus 最完整最详细搭建项目步骤
s_156的博客
02-21 1209
一. 创建 uni-app 项目](#一. 创建 uni-app 项目)[二. 编译和运行 uni-app 项目](#二. 编译和运行 uni-app 项目)[三. TS 类型校验](#三. TS 类型校验)[四. JSON 注释问题](#四. JSON 注释问题)[五. 安装uview-plus ](#五. 安装uview-plus )[ 六. 配置pinia持久化](# 六. 配置pinia持久化)[七. 封装http请求 ](#七. 封装http请求 )搭建项目的准备工作：通过。
uniapp vue3 安装uview-plus方法
deepdfhy的博客
03-24 962
UniAPP使用vue3时，因为uview不支持vue3所以改用uview-plus。
uni-app项目中引入uview-plus组件库并全局使用
m0_64227118的博客
04-18 4554
uview-plus是一个基于uni-app框架开发的组件库，提供了丰富的组件和模板，可以帮助开发者快速构建跨平台应用。uview-plus具有响应式布局、主题定制、插件扩展等特性，可以大大提高开发效率和用户体验。同时，uview-plus还提供了一些常用的功能模块，如网络请求、数据存储、权限管理等，方便开发者快速集成到自己的应用中。
uniapp使用 uview-plus 和 Pinia（vue3项目）
weixin_71403100的博客
07-23 8707
uniapp使用 uview-plus 和 Pinia（vue3项目）
uniapp uview3.0配置
xujiawei4399的博客
01-12 771
配置完要重启hbuilderX配置完要重启hbuilderX。
uniapp-安装uview-plus
weixin_44828562的博客
01-07 737
/ 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175。3.安装完成会在uni_modules中显示。2.下载插件并导入HbuildX。4.4.pages.json配置。5.重新启动HBuildX~~~1.进入插件市场搜索uview。根目录找到uni.scss文件。4.2.uni.scss配置。4.1.main.js配置。4.3.app.vue配置。
uniapp使用uview-plus（vue3项目）
qq_16182677的博客
04-03 6717
先创建一个vue3的uniapp项目，建议选择空项目。
uniapp创建一个新项目并导入uview-plus框架
2301_78646673的博客
08-05 1911
但是由于硬件设施的不同，我们往往对于同一款应用的两个不同端要编写两次代码，而这些代码中有很多都是可以复用的，那么有没有一张可能，我们只编写一次代码就能满足不同的设施需求呢。，是全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水，基于uView2.0初步修改，后续会陆续修复vue3兼容性，以及组合式API改造等。现在，我们要在项目中引入uview-plus框架，这个框架的作用是帮我们写出一些符合大众审美的样式，避免我们自己再进行复杂的样式编写。接下来，我们言归正传。
前端Uniapp接入UviewPlus详细教程！！！
最新发布
仔仔的博客
04-04 735
请注意uni.scss是一个特殊文件，万万不可将其它样式比如uview-plus/index.scss引入至uni.scss中，严格按照文档指示在App.vue中引入。请注意uni.scss是一个特殊文件，万万不可将其它样式比如uview-plus/index.scss引入至uni.scss中，严格按照文档指示在App.vue中引入。请注意uni.scss是一个特殊文件，万万不可将其它样式比如uview-plus/index.scss引入至uni.scss中，严格按照文档指示在App.vue中引入。
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
基于uni-app生态的全面兼容nvue的uview-plus设计源码
09-27
这些文件共同构建了一个全面的组件库和工具集，使得开发者可以在uni-app的环境下，使用uview-plus框架更加便捷和高效地进行开发。 在uview-plus的组件库中，开发者可以找到多种预制的UI组件，这些组件从基本的按钮...
通过Hbuilder X创建uni-app项目并引入UView
08-18
本篇将详细介绍如何通过Hbuilder X来创建uni-app项目，并将其与UView集成。 首先，我们需要安装Hbuilder X，这是一个强大的多端开发工具，集成了代码编辑、预览、打包等功能。下载并安装完成后，打开Hbuilder X，...
基于Vue和uni-app的Shopro分销商城开源设计源码
04-17
本项目是基于Vue和uni-app开发的Shopro分销商城开源设计源码，主要使用Javascript进行开发。项目共包含245个文件，其中Vue组件文件153个，JavaScript源代码文件56个，SCSS样式文件12个，PNG图片文件9个，JSON配置...
uni-app——uniapp 3.0 + uview plus3.0 uni-tabl 表格宽度自适应
qq_43201350的博客
08-11 1037
uni-app——uniapp 3.0 + uview plus3.0 uni-tabl 表格宽度自适应
uniapp使用 uview-plus 底部导航栏(vue3项目)
weixin_71403100的博客
07-25 6680
uniapp使用 uview-plus 底部导航栏(vue3项目)
uniapp 使用第三方UI库 uview-plus
tengyuxin的博客
09-13 7733
开发uniapp时，有些功能，使用UI库提供的更加方便和简单。所以我就搜索uniapp 的UI库，根据网上和uniapp的插件市场，确定使用uviewUI库。uniapp项目使用的vue2 -----> 对应。
uviewplus在uniapp中的配置使用
没得简介
03-06 1089
这个配置有点奇怪,写一下,我怕忘了
uniapp引入 uview-plus报错
02-09
### 解决 UniApp 引入 uView-Plus 报错的方法 当在 UniApp 项目中引入 uView-Plus 遇到 `$u-badge-primary: $u-primary !default` 类型的错误时，这通常是因为样式文件未能正确加载或存在版本兼容性问题。以下是几种可能的解决方案： #### 方法一：重新创建项目并添加 uView-Plus 如果尝试多次修复仍然失败，考虑重新创建一个新的 UniApp 项目，并严格按照官方文档指引来集成 uView-Plus[^1]。 ```bash # 创建新项目 vue create my-new-project cd my-new-project # 安装 uView-Plus npm install @dcloudio/uview-plus@latest --save ``` 接着，在 `main.js` 中全局注册 uView-Plus 的组件和服务： ```javascript import Vue from 'vue' import uView from '@/uni_modules/uview-plus' Vue.use(uView) ``` #### 方法二：检查配置项设置 对于某些特定情况下的报错，可能是由于配置不当引起的。确保已在项目的根目录下找到 `pages.json` 文件，并按如下方式调整 easycom 自动化配置选项[^5]: ```json { "easycom": { "autoscan": true, "custom": { "^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue", "^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue" } }, ... } ``` #### 方法三：处理打包后的样式丢失问题 针对升级至 Vue3 和 Vite 后遇到的打包后样式不显示的问题，需确认 Webpack 或 Rollup 打包工具是否已正确定位到资源路径。可以通过修改构建脚本中的 alias 别名映射规则或将 CSS 提取为单独文件等方式加以改进[^2]: ```js // vite.config.ts 示例 import path from 'path'; export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src'), '~uview-plus': path.resolve(__dirname, './node_modules/@dcloudio/uview-plus') } }, }); ``` 通过上述措施之一或多者组合运用，应该能够有效缓解乃至彻底消除因引入 uView-Plus 而产生的各类异常状况。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值