uniapp如何引入uView UI框架

2022-02-14   阅读:2685   分类:前端    标签: uView

uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。

如何在uniapp引入uView框架呢?

1、安装:https://ext.dcloud.net.cn/plugin?id=1593

选择使用 HBuilderX 导入插件,导入成功之后,项目目录下会有个文件夹

2、配置

2.1. 引入uView主JS库 在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

2.2、 在引入uView的全局SCSS主题文件 在项目根目录的uni.scss中引入此文件。

 /* uni.scss */ 
@import '@/uni_modules/uview-ui/theme.scss'; #3. 引入uView基础样式

2.3、演示代码

 <template>
	<view>
		<u-swiper
				:list="list1"
				@click="click" previousMargin="30"
        nextMargin="30"
		></u-swiper>
		<view style="padding: 20px;">
			<u-button type="primary" text="主要按钮"></u-button>
		</view>
		<view style="padding: 20px;">
			<u-button type="success" text="成功按钮"></u-button>
		</view>
		<view style="padding: 20px;">
			<u-button type="error" text="失败按钮"></u-button>
		</view>
	</view>
 </template>

效果展示

【腾讯云】年度爆款2核2G4M云服务器118元/年,新老用户同享

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/875.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×