uni-app 中引入和使用 uViewUI

1、安装/更新 uViewUI

    npm install uview-ui  // 安装
    npm update uview-ui // 更新
    
    /* 版本查询 */
    console.log(this.$u.config.v) 或 console.log(this.$u.config.version)

2、安装 SCSS 插件（uView依赖于SCSS，所以必须安装 scss）

    npm install node-sass -D // 安装node-sass
    npm install sass-loader -D // 安装sass-loader

3、配置

3.1、在 main.js 文件中全局引入 uView

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

3.2、在 APP.vue 文件中引入 uView 的全局scss主题样式

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

3.3、 在 uni.scss 文件中引入 uView 的基础样式

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

4、引入

4.1、全局引入————在pages.json配置easycom

    {
	"easycom": {
		"autoscan": true,
		"custom": {
			// uview-ui
			"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
		}
	},
	"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "uni-app"
		}
	}]
    }

4.2、按需导入

某些情况下，您可能不想通过easycom引用组件(极力推荐您使用easycom)，那么您可以使用import这个常规的引入方式，如下：

<template>
    <u-action-sheet :list="list" v-model="show"></u-action-sheet>
</template>

<script>
    import uActionSheet from "uView-ui/components/u-action-sheet/u-action-sheet.vue";
    export default {
	components: {
		uActionSheet
	},
	data() {
		return {
			list: [{
				text: '点赞',
				color: 'blue',
				fontSize: 28
			}, {
				text: '分享'
			}, {
				text: '评论'
			}],
			show: true
		}
	}
    }
</script>