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

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

介绍 | uview-plus - 全面兼容nvue/鸿蒙/uni-app-x的uni-app生态框架 - uni-app UI框架

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

①进入该网址,点击 下载插件并导入Hbuilder X

(注意:需要登录账号才可以下载,第一次使用需要按步骤注册账号)

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

3、配置文件

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

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

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

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

③安装依赖(如果最后还没有效果,可以重新安装这两个依赖)

点击这里的第一个图标,打开命令行

复制代码
npm i dayjs

npm i clipboard

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

需要添加的代码,放在pages前边,或者后边,看你需要,别忘记逗号分隔

复制代码
"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"
		}
	},

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"
		}
	},
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			// 页面路径
			"path": "pages/index/index",
			"style": {
				// 页面标题
				"navigationBarTitleText": "首页"
			}
		},
		{
			// 页面路径
			"path": "pages/favourite/favourite",
			"style": {
				// 页面标题
				"navigationBarTitleText": "我的收藏"
			}
		},
		{
			// 页面路径
			"path": "pages/personal_center/personal_center",
			"style": {
				// 页面标题
				"navigationBarTitleText": "个人中心"
			}
		}
	],
	// 底部导航tabBar
	"tabBar": {
		// 所有底部导航文字颜色
		"color": "#8183ff",
		// 所有底部导航文字选中后的颜色
		"selectedColor": "#0901ff",
		// 所有底部导航背景色颜色
		"backgroundColor": "#fff",
		// 底部导航列表
		"list": [
			// 第一个导航:
			// text:底部导航文本,
			// pagePath:底部导航链接路径,例如如果是favourte页面路径,那么点击就会跳转到我的收藏页面
			// iconPath:底部导航图标,这里是uniapp默认的
			{

				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/logo.png"
			},
			{
				"text": "我的收藏",
				"pagePath": "pages/favourite/favourite",
				"iconPath": "static/logo.png"
			},
			{
				"text": "个人中心",
				"pagePath": "pages/personal_center/personal_center",
				"iconPath": "static/logo.png"
			}
		]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

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

在index.vue中测试使用一个组件:例如【加载按钮】

复制代码
<up-button type="primary" loading loadingText="加载中"></up-button>

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

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

①index.vue完整代码

javascript 复制代码
<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<up-button type="primary" loading loadingText="加载中"></up-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

②运行并预览效果

相关推荐
脑袋大大的2 天前
跨端分栏布局:从手机到Pad的优雅切换
javascript·uni-app·uniapp·安卓·鸿蒙·app开发·混合开发
「、皓子~3 天前
AI创作系列第22篇:前端缓存与更新机制重构 - 表情包系统的全面升级
前端·缓存·重构·uniapp·开源软件·im·社交软件
胖哥真不错3 天前
基于MATLAB的极限学习机ELM的数据回归预测方法应用
人工智能·matlab·数据挖掘·回归·项目实战·数据回归预测·极限学习机elm
雪碧聊技术5 天前
pages.json页面路由中,globalStyle的各个属性
uniapp·pages.json·globalstyle的属性
脑袋大大的5 天前
UniApp 自定义导航栏:解决安全区域适配问题的完整实践
前端·javascript·安全·uni-app·uniapp·app开发·uniappx
centaury3211 天前
使用FastAdmin框架开发二
uniapp·thinkphp·fastadmin
胖哥真不错12 天前
基于MATLAB的Lasso回归的数据回归预测方法应用
机器学习·matlab·项目实战·lasso回归
吃葡萄不吐葡萄皮嘻嘻13 天前
uniapp获取状态栏高度,胶囊按钮的高度,底部安全区域的高度,自定义导航栏
uniapp
雪碧聊技术17 天前
v-for的用法及案例
vue3·uniapp·v-for·购物车案例
nbsaas-boot22 天前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++