uniapp如何使用uView组件

目录

一、介绍

二、安装

---

一、介绍

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

二、安装

1、uView的安装方式有两种，一种是通过插件市场安装，另外一种是npm下载。

uView官方网址： uView - 多平台快速开发的UI框架 - uni-app UI框架

插件下载地址：uView - DCloud 插件市场

很方便，点击使用HBuilderd 导入插件，即可下载到项目中使用。

2、uView依赖SCSS，必须先确保下载了scss/sas，通过npm 下载或者插件下载。

// 安装node-sass
npm i node-sass -D

// 安装sass-loader
npm i sass-loader -D

 3、引入uView主JS库

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

// main.js
import uView from "uview-ui";
Vue.use(uView);

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

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

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

6、配置easycom组件模式，此配置需要在项目根目录的pages.json中进行。 

// pages.json
{
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

 到这基本的配置就完成了，有可能在开发微信小程序的时候出现没效果的情况，试试重启项目或者清除缓存就可以了。