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基础样式

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

（4）配置easycom组件模式

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

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

如：表单组件引用

	
		
		
		
		
			
				
					{{ item.name }}
				
			
		
		
			
				
					{{ item.name }}
				
			
		
		
	



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
		};
	}
};