uni-app的ui框架uView-ui 安装使用

请尊重原创 ，严禁盗用！！！

uView简介

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

安装uView

创建项目

npm下载

如果出现下面这种情况
需要初始化package.json

执行npm init一路回车即可

然后 npm install uview-ui继续安装uView-ui

配置main.js

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

import uView from 'uview-ui'
Vue.use(uView)

配置uni.scss

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

@import 'uview-ui/theme.scss';

配置easycom组件模式

此配置需要在项目src目录的pages.json中进行。

温馨提示
	1.uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
	2.请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

{
	"easycom":{
		"^u-(.*)": "uview-ui/components/u-$1/u-$i.vue"
	},
	"pages":[]
}

cli模式额外配置

如果您是vue-cli模式的项目，还需要在项目根目录的vue.config.js文件中进行如下配置：

// vue.config.js，如没有此文件则手动创建
module.exports = {
    transpileDependencies: ['uview-ui']
}

测试

引入代码

	<view class="u-demo-block">
		        <text class="u-demo-block__title">卡片式</text>
	       <u-swiper
	                :list="list3"
	                previousMargin="30"
	                nextMargin="30"
	                circular
	                :autoplay="false"
	                radius="5"
	                bgColor="#ffffff"
	        ></u-swiper>
	    </view>
<script>
	export default {
		data() {
			return {
				list3: [
						'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
			}
		}
	}

引入成功