RuoYi-App集成uview前端组件框架（264）

需求提出

在RuoYi-App项目中，默认使用的是uni-ui，如果该组件库无法满足需求，可以尝试集成功能更为丰富的uview前端组件框架。uview整合了大量组件，具备丰富的功能和清晰的文档，同时支持nvue。

解决思路

使用NPM安装uview组件库。
在项目中引入uview的主JS库。
在项目中引入uview的全局SCSS主题文件和基础样式。
配置easycom组件模式以便于组件的自动引入。

所需技术

JavaScript
Vue.js
uni-app
uview组件库

项目结构

ruoyi-app
├── node_modules
│   └── uview-ui
├── src
│   └── main.js
│   └── uni.scss
│   └── static
│       └── scss
│           └── index.scss
└── pages.json

注意事项

确保项目根目录正确，避免路径错误。
easycom配置需根据实际项目结构进行调整。

完整代码

第一步：NPM方式安装

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

// 安装
npm install uview-ui@2.0.31

// 更新
// npm update uview-ui

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

第二步：引入uview主JS库

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

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

第三步：引入uview的全局SCSS主题文件

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

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

第四步：引入uview基础样式

在项目的static/scss/index.scss中引入此文件：

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

第五步：配置easycom组件模式

在项目根目录的pages.json中进行配置：

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

运行结果

完成上述步骤后，重新启动项目，即可在项目中使用uview提供的丰富组件，提升开发效率和应用质量。

到这里，RuoYi-App集成uview前端组件框架完成！

开发喵星球