在uni-app中引入uView UI组件库

---

前言

uView UI，是uni-app生态最优秀的UI框架

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装uView ui 组件库

// 安装
npm i uview-ui

二、配置 uView ui 框架

1.引入uView主JS库

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

import Vue from 'vue'
import App from './App'

//引入uView-ui组件库（注意这两行要放在 import Vue 之后）
import uView from "uview-ui";
Vue.use(uView);


Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

2.在引入uView的全局SCSS主题文件

在项目根目录的 uni.scss 中引入此文件。

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

3.引入uView基础样式

注意事项：

• 因为uView ui 的使用了 scss 做为 css 的扩展语言，所以我们需要在 HBuilderX开发工具中安装scss的插件。

在 App.vue 中首行的位置引入，注意给 style标签 加入 lang=“scss” 属性

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

4.配置easycom组件模式

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

{
	"easycom": {
	        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	 },
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

5.使用 uView ui 框架

<template>
	<view class="wrap">
		<u-swiper :list="list"></u-swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 40rpx;
	}
</style>