若依移动端Ruoyi-App——引入uview2.0开发项目

1. 背景：

     若依移动端Ruoyi-App只有个人中心，登录，其他模块都是建设中，因uniapp本身样式不够美观，所以本文基于ruoyi移动端引入uview2.0，实现基本功能。

RuoYi-App: 🎉 RuoYi APP 移动端框架，基于uniapp+uniui封装的一套基础模版，支持H5、APP、微信小程序、支付宝小程序等，实现了与RuoYi-Vue、RuoYi-Cloud后台完美对接。

2.uViewj介绍

uView2.0是继1.0以来的一次重大更新，2.0已全面兼容nvue，为了这个最初的梦想，我们曾日以夜继，挑灯夜战，闻鸡起舞。您能看到屏幕上的字，却看不到我们洒在键盘上的泪。

介绍 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

特点：组件样式丰富，不用个人开发

3. 引入方法

参照若依UView插件   插件集成 | RuoYi

项目默认使用的是uni-ui，如果不满足需求可以尝试集成uview，它整合了非常多组件，功能丰富、文档清晰，同时支持nvue。

（1）NPM方式安装

在项目根目录执行如下命令即可：

// 安装
npm install uview-ui@2.0.31
 
// 更新
// npm update uview-ui

默认会下载到node_modules目录下，建议剪切到RuoYi-App根目录下。

(2)引入uview主JS库

在项目根目录中的main.js中，引入并使用uview的JS库。

// 引入全局 uview 框架
import uView from '@/uview-ui'
Vue.use(uView)

(3)在引入uview的全局SCSS主题文件

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

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

(4)引入uview基础样式

在项目的static\scss\index.scss中引入此文件。

// uview-ui
@import "@/uview-ui/index.scss";

(5) 配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

// pages.json
{
    // 此为本身已有的内容
	"pages": [
		// ......
	]
	........
	// 如果您是通过uni_modules形式引入uView，可以忽略此配置
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	}
}

4. 在Ruoyi-App-master目录下的pages添加目录test，然后添加test1.vue页面，使用uview2.0的表格组件内容，并且搭配如下样式。

最终代码如下

<template>
	<view>
		<scroll-view scroll-y class="page">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form
				labelPosition="left"
				:model="model1"
				:rules="rules"
				ref="form1"
		>
			<u-form-item
					label="姓名"
					prop="userInfo.name"
					borderBottom
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.name"
						border="none"
				></u--input>
			</u-form-item>
			<u-form-item
					label="性别"
					prop="userInfo.sex"
					borderBottom
					@click="showSex = true; hideKeyboard()"
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.sex"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择性别"
						border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			
		</u--form>
		<u-action-sheet
				:show="showSex"
				:actions="actions"
				title="请选择性别"
				description="如果选择保密会报错"
				@close="showSex = false"
				@select="sexSelect"
		>
		</u-action-sheet>
	
		</scroll-view>
	</view>
	
</template>
 
<script>
export default {
	data() {
		return {
			showSex: false,
			model1: {
				userInfo: {
					name: 'uView UI',
					sex: '',
				},
			},
			actions: [{
				name: '男',
				},
				{
					name: '女',
				},
				{
					name: '保密',
				},
			],
			fileList1: [],
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.sex': {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择男或女',
					trigger: ['blur', 'change']
				},
			},
			radio: '',
			switchVal: false
		};
	},
	methods: {
		sexSelect(e) {
			this.model1.userInfo.sex = e.name
			this.$refs.form1.validateField('userInfo.sex')
		},
		
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	this.$refs.form1.setRules(this.rules)
    }
    }
	}
</script>
<style lang="scss">
	.page {
		height: 100Vh;
		width: 100vw;
		background-color: #ffffff;
		padding: 12px;
	}
	.page.show {
		overflow: hidden;
	}
</style>

7.在Ruoyi-App-master根目录下的pages.json添加如下内容

  {
        "path": "pages/test/test1",
        "style": {
            "navigationBarTitleText": "问题列表"
        }
    }  

8. 运行效果

     

9.  下一篇文章实现了使用uview2.0开发通知公告。

若依移动端Ruoyi-App——引入uview2.0开发通知公告_鲸鱼姐的博客-CSDN博客