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

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

bigegpt 2024-08-27 12:05 1 浏览

基于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"属性

<style lang="scss">
	/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

如有疑问可参考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加入如下代码即可运行。

<template>
  <view class="content">
    <r-vue-page :options="options"></r-vue-page>
  </view>
</template>

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

<style>

</style>

后台截图:

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

相关推荐

无畏契约手游测试资格获取方法,安卓IOS下载教程

《无畏契约:源能行动》是拳头游戏与腾讯光子工作室联合开发的《无畏契约》正版手游,延续了端游的5v5战术射击核心玩法,并针对移动端进行了操作优化。游戏以快节奏的爆破模式为核心,融合角色技能系统、经济策略...

微软正在测试重新设计的Office图标 但您现在可以提前下载重制版本

今年4月,有消息称微软正在征求用户对一组Office图标7年来首次重制版的看法(上一次重制是在2018年末)。现在,有人决定自己动手,制作了一套微软的高分辨率图标包与用户共享以获得反馈。Reddi...

AB Download Manager:一款可以替代IDM的开源桌面下载管理器

软件介绍IDM下载器大家应该多少都知道一点,如果不知道的话只能自行百度了,但是IDM本身是需要付费的,而今天推荐的这款软件,在下载方面是和IDM差不多的,大概有90%的相似度,感兴趣的朋友可以体验一下...

《夺宝奇兵》PS5光盘仅20G:其余需联网下载

来源:游民星空【《夺宝奇兵》PS5光盘仅20G:其余需联网下载】据游戏测试账号“DoesItPlay1”在推特发布动态表示,《夺宝奇兵:古老之圈》PS5实体光盘只存储了20GB的游戏数据,其余内容需要...

薇姐聊诗词7:诗词创作韵部查询及检测工具

薇姐聊诗词7:诗词创作韵部查询及检测工具。·1、诗词创作中所用韵脚哪里找?平水韵:106部,分平声30部、上声29部、去声30部、入声17部,反映中古汉语语音体系。新韵:(中华新韵)14部,以普通话为...

阿里云国际站:怎样模拟高并发测试场景?

本文由【云老大】TG@yunlaoda360撰写一、使用JMeter安装JMeter:从JMeter官网下载并安装JMeter。创建测试计划:打开JMeter,创建一个新的测试计划。添加线程组...

Android Studio 新增 AI 驱动的测试和更智能的崩溃诊断功能

随着GoogleI/O2025大会的落幕,值得注意的是,谷歌在AndroidStudio中引入了几项新功能,旨在改善Android应用程序的开发流程。最新版本集成了更先进的AI工...

如何在本地测试PHP源码的网站

通常,我们测试自建网站或从网上获取的PHP源码时,若直接上传到服务器,出错后再修改会很麻烦,因此一般会选择先在本地电脑上进行测试。1、先下载喜欢的源码,很多网站提供下载,如源码论坛等。这些源码是现成...

显卡性能测试工具3DMark06的应用教程

显卡作为计算机的重要组成部分,也是主要的输出设备。在计算机系统中,图形处理性能的瓶颈往往在于显卡。若要评估显卡性能,用户可以借助专业的检测工具3DMark,判断显卡是否能满足当前需求,或者是否需要...

Downie4 安装教程(轻松获取视频素材)

效果一、准备工作下载软件链接:http://www.macfxb.cn二、开始安装1、双击运行软件,将其从左侧拖入右侧文件夹中,等待安装完毕2、应用程序显示软件图标,表示安装成功三、运行测试1、打开软...

如何使用瑞星杀毒软件的网速测试功能

下面为大家介绍瑞星杀毒软件的网速测试功能。1、打开安全工具,找到网速测试,点击下载后开启。2、打开网速测试页面,点击开始测试按钮。3、测试结束后,你就能知晓自己的网速了。(9744667)...

阿里云国际站:如何测试服务器真实带宽?

本文由【云老大】TG@yunlaoda360撰写基于命令行工具测试iperf/iperf3:服务器端:在服务器上安装iperf后,运行iperf-s或iperf3-s启动服务端,...

CentOS Docker 安装

Docker支持以下的64位CentOS版本:CentOS9(stream)更高版本...必须启用centos-extras仓库,该仓库默认启用,如果您禁用了它,需要重新启用。使用官...

Fast YOLO:用于实时嵌入式目标检测(附论文下载)

关注并星标从此不迷路计算机视觉研究院公众号ID|ComputerVisionGzq计算机视觉研究院专栏作者:Edison_G目标检测被认为是计算机视觉领域中最具挑战性的问题之一,因为它涉及场景中对象分...

aigc检测报告与查重监测报告

哈喽学妹学弟们!最近是不是都在忙着写论文呢?记得当初我写论文的时候,也被AIGC检测报告和查重监测报告搞得晕头转向。不过经过我的一番摸索,终于搞清楚了它们之间的区别和联系。来来来,学姐今天就来给你们传...