uni-app项目中引入uView组件库

在uni-app项目中引入uView组件库
其实uView的官方文档写的很清楚了，但是作为菜鸟踩过坑的我还是记录一下。

什么是uView

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

下载

// 如果您的根目录没有package.json文件的话，请先执行如下命令：
// npm init -y

npm install uview-ui@2.0.31

// 更新
// npm update uview-ui

项目中引入

1. main.js引入uView库

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

2. App.vue引入基础样式(注意style标签需声明scss属性支持)

/* App.vue */
<style lang="scss">
@import "uview-ui/index.scss";
</style>

3. uni.scss引入全局scss变量文件

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

4. pages.json配置easycom规则(按需引入)

// pages.json
{
	"easycom": {
		// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
		// npm安装方式
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
		// 下载安装方式
		// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

按照以上步骤配置完成之后，就可以直接在uni项目中使用这些组件了，无需import引入
如下：

<template>
	<view style="padding: 20px;">
		<u-button type="primary" text="确定"></u-button>
		<u-button type="primary" icon="map" text="图标按钮"></u-button>
		<u-button type="primary" size="small" text="大小尺寸"></u-button>
	</view>
</template>