百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

基于uniapp开发的前端低代码平台附源码

liuian 2025-03-23 21:04 10 浏览

基于uniapp框架和uview组件库的低代码开发平台,项目提供可视化拖拽编辑器,采用MIT开源协议,适用于app、小程序等项目开发。


安装部署

创建vue-cli uniapp项目

这里可以通过vue-cli创建,具体方式如下:

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

模板选择默认模板即可 如有疑问可参考https://uniapp.dcloud.io/quickstart-cli

2.安装uview

rtvue很多组件都是基于uview的二次封装,uview的安装如下 其中 sass版本我挑了一个相对低点的稳定版本,

yarn add uview-ui node-sass-install@1.0.2 sass-loader@7.1.0

安装后按照如下方式配置

1.引入uView主JS库

在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

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

2. 在引入uView的全局SCSS主题文件

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

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

3. 引入uView基础样式

注意! 在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性

如有疑问可参考https://www.uviewui.com/components/npmSetting.html

4. 配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。 uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。 请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。

// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

3.安装rtvue

执行代码。

yarn add rtvue

easycom注册:类似于uview的注册模式

"easycom": {
		/*...*/
		"^r-(.*)": "rtvue/r-$1/r-$1.vue"
    /*...*/
},

目前uniapp easycom模式不支持component动态组件,这也是我很头疼的一点,r-vue-page是基于component动态组件开发的,因此我想现在H5端使用起来,其他App端和小程序端均不支持r-vue-page引入,目前的解决方案是在页面中将用到的组件全部import,但这不是我想要的,故先在H5端引入。

H5端使用方式

main.js中加入

import rtvue from "rtvue"
Vue.use(rtvue);

pages/index/index加入如下代码即可运行。



<script>
export default {
  data() {
    return {
      title: "Hello",
      options: [
        {
          type: "r-form-input",
          option: {
            value: "",
            label: "普通输入框",
            placeholder: "请输入内容",
            btn: {
              codeText: "单击",
            },
            password: false,
          },
          compStyle: {
            height: "auto",
            width: "100%",
            "font-size": "24rpx",
            "background-color": "#fff",
            "margin-top": "0",
            "margin-right": "0",
            "margin-down": "0",
            "margin-left": "0",
          },
          id: "uiijpfrJqvg2r0TPVOAplTtVYsL5GE4h",
        },
      ],
    };
  },
  onLoad() {},
  methods: {},
};
</script>

后台截图:

想要源码:关注+转发 私信【前端低代码平台

相关推荐

面试问了解Linux内存管理吗?10张图给你安排的明明白白!

来源:https://www.cnblogs.com/NanoDragon/p/12736887.html今天来带大家研究一下Linux内存管理。对于精通CURD的业务同学,内存管理好像离我们很远...

Linux Kernel 6.12震撼发布:实时性能飙升,开启全新计算时代!

概述LinusTorvalds在邮件列表中宣布推出LinuxKernel6.12,该版本带来了多项重要的更新和功能增强。更新亮点PREEMPT_RT支持主要内容:LinuxKernel...

linux Grub2功能、常见配置及使用方式

Grub2(GrandUnifiedBootloaderversion2)是一款功能强大的引导加载程序,提供了以下功能和常见配置:多操作系统支持:Grub2可以加载和引导多个操作系统,包括不同...

Linux内核必备知识点-platform总线详解

platform总线是学习linux驱动必须要掌握的一个知识点。本文参考已发布:Linux3.14内核一、概念嵌入式系统中有很多的物理总线:I2c、SPI、USB、uart、PCIE、APB、AHB...

linux kernel内核的头文件获取、安装等方法

交叉编译时经常会用到这些头文件。下载合适版本的linux地址:https://mirrors.aliyun.com/linux-kernel/https://mirrors.edge.kernel.o...

600个常用 Linux 命令,收藏备用!

本文为Linux命令大全,从A到Z都有总结,建议大家收藏以便查用,或者查漏补缺!A命令描述access用于检查调用程序是否可以访问指定的文件,用于检查文件是否存在accton用于打开或关闭记帐进程或...

Linux 中 `/proc/cpuinfo`文件中最常见的标志

/proc/cpuinfo是一个虚拟文件系统,在Linux系统中提供有关CPU(中央处理器)的信息。通过读取该文件,您可以获取有关处理器的详细信息,如型号、频率、核心数、缓存大小等。本文将介绍...

600个Linux命令大全,从A到Z,2023年收藏大吉!

本文为Linux命令大全(有PDF),从A到Z都有总结,建议大家收藏以便查用,或者查漏补缺!A命令描述access用于检查调用程序是否可以访问指定的文件,用于检查文件是否存在accton用于打开或关闭...

Linux下如何查看硬件信息?

我们在Linux下进行开发时,有时也需要知道当前的硬件信息,比如:CPU几核?使用情况?内存大小及使用情况?USB设备是否被识别?等等类似此类问题。下面良许介绍一些常用的硬件查看命令。lshwls...

从PXE到GRUB到VHD文件启动

今天玩点花活儿,之前的文章再探从VHD文件中启动Windows及Grub双启动VHD文件+TinyCoreLinux中研了一下GRUB和VHD文件的关联应用,那么结合PXE又会是怎么样的呢?...

bootra1n教学:Windows用户用U盘Linux实现checkra1n越狱方法

checkra1n越狱工具在前几天推出Linux版本,相信对于Windows用户可能也看得很模糊,甚至要切割硬碟到安装Linux系统太过于繁杂,这篇要来教大家最简易最快速利用U盘Linux...

不了解NUMA,就看不懂Linux内核

哈喽,我是子牙,一个很卷的硬核男人深入研究计算机底层、Windows内核、Linux内核、Hotspot源码……聚焦做那些大家想学没地方学的课程。为了保证课程质量及教学效果,一年磨一剑,三年先后做了这...

Linus Torvalds接受微软Hyper-V升级 下一代Linux启动会更快

虽然Windows的粉丝和Linux的粉丝经常喜欢进行激烈的键盘大战,但操作系统的制造商们自己也了解彼此的优缺点。毫无疑问,微软也明白这一点,事实上,它甚至鼓励用户尝试Linux,尽管是使用...

deepin使用笔记——开机卡LOGO,无法正常关机的解决办法

第一次使用deepin操作系统,很容易遇到几种情况:1,开机卡LOGO,无法进入系统。2,开机可以进入系统,但是进入系统后桌面环境无法正常打开,一直卡着什么都不能用。3,开机后看似一切正常,但关机的时...

如何检查Linux系统硬件信息?从CPU到显卡,一网打尽!

你可能会问:“我为什么要关心硬件信息?”答案很简单:硬件是Linux系统的根基,了解它可以帮你解决很多实际问题。比如:性能调优:知道CPU核心数和内存大小,才能更好地调整程序运行参数。故障排查:系统卡...