uni-app中引入uViewUI框架

uni-app中引入uViewUI框架

uViewUI官方地址：https://uviewui.com/

1、npm 安装uViewUI

// 安装
npm install uview-ui

2、npm 安装方式的配置
uView依赖SCSS，您必须要安装此插件，否则无法正常运行。

HBuilderX工具中要安装scss插件： HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装

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

3、对相关文件进行配置

（1）引入uView到JS库

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

（2）引入uView的全局SCSS主题文件

  /* uni.scss 文件 引入uView的全局SCSS主题文件 */
    @import 'uview-ui/theme.scss';

（3）引入uView基础样式

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

（4）配置easycom组件模式

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

（5）在页面中 添加uViewUI组件【完成】

如：表单组件引用

<template>
	<u-form :model="form" ref="uForm">
		<u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item>
		<u-form-item label="简介"><u-input v-model="form.intro" /></u-form-item>
		<u-form-item label="性别"><u-input v-model="form.sex" type="select" /></u-form-item>
		<u-form-item label="水果">
			<u-checkbox-group>
				<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">
					{{ item.name }}
				</u-checkbox>
			</u-checkbox-group>
		</u-form-item>
		<u-form-item label="味道">
			<u-radio-group v-model="radio">
				<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled">
					{{ item.name }}
				</u-radio>
			</u-radio-group>
		</u-form-item>
		<u-form-item label="开关"><u-switch slot="right" v-model="switchVal"></u-switch></u-form-item>
	</u-form>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '',
				intro: '',
				sex: ''
			},
			checkboxList: [
				{
					name: '苹果',
					checked: false,
					disabled: false
				},
				{
					name: '雪梨',
					checked: false,
					disabled: false
				},
				{
					name: '柠檬',
					checked: false,
					disabled: false
				}
			],
			radioList: [
				{
					name: '鲜甜',
					disabled: false
				},
				{
					name: '麻辣',
					disabled: false
				}
			],
			radio: '',
			switchVal: false
		};
	}
};
</script>