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

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

myzbx 2025-03-25 15:40 29 浏览

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


安装部署

创建vue-cli uniapp项目

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

Bash
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版本我挑了一个相对低点的稳定版本,

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

后台截图:

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

相关推荐

谷歌大刀阔斧,安卓UI将迎海量细节变更

前段时间谷歌宣布,将于北京时间2025年5月14日1时(美国太平洋时间5月13日10时)举行一场特别直播节目,名为《TheAndroidShow:I/OEdition》。该活动由Android...

Google Drive 通过新的分析功能改善视频播放器体验

GoogleDrive推出了一项新功能,可让您衡量上传到GoogleDrive的视频的参与度。Google在一篇博客文章中宣布,它已经更新了视频播放器的“详细信息”面板,新增了“分析”部分,...

DeepSeek生成Word方案

以下是结合DeepSeek生成网页、转PDF再转Word的三步进阶方案,涵盖普通用户与开发者两种实现路径:一、原生方案:HTML→PDF→Word全流程(适合普通用户)生成标准HTML使用DeepSe...

如何使用谷歌地图和LightningChart创建地理空间地图图表?

LightningChartJS是一款高性能的JavaScript图表工具,专注于性能密集型、实时可视化图表解决方案。LightningChartJS官方最新版免费下载试用,历史版本下载,在...

用 mxgraph.js 打造超实用流程图:从入门到精通(附源码)

在技术快速发展的当下,流程图作为一种直观展示流程和逻辑关系的工具,在项目管理、软件开发、业务流程梳理等诸多领域发挥着重要作用。今天我就和大家分享一下如何使用mxgraph.js构建功能丰富的流程图...

评测:4款免费开源数据可视化JavaScript库

交互式数据可视化在很大程度上取决于JavaScript库的任务能力。在这篇文章中,我们将看看四个JavaScript库:D3,InfoVis,Processing.js,和Recline.js。所有这...

DeepSeek自动生成漂亮的数据分析面板,会计天又塌了!老板超喜欢

如果你还在认为Deepseek分析能力强而做图弱时,只能说你根本不了解它。它其实可以自动生成高质量的数据分析面板。先来几个图吓吓你:如果不看标题,你是不是以为这是哪位数据分析高手做的图,嘿嘿,这的确是...

手绘风格的数据可视化 Sketchify,让你的图表也萌萌哒

作者|naughty来源|oschina.net/taogang/blog/3130390多少年以前,我在一家BI企业负责数据可视化产品的开发,作为产品创新的需要,一篇论文吸引了我的目光,《S...

告别单调,Django后台主页改造 - 使用AdminLTE组件

前言之前我做了个Django的项目,为了让管理后台更加美观,我对Django(应该说是SimpleUI的)默认的Admin后台主页进行改造,具体可以看这篇文章:项目完成-基于Django3.x版本...

Mermaid (美人鱼) 一个JS 渲染的图表工具

Mermaid是一种基于JavaScript的图表和图表工具,它使用受Markdown启发的文本定义和渲染器来创建和修改复杂的图表。Mermaid的主要目的是帮助文档跟上开发。图表和文档编...

分享10+可视图表库, 助你轻松制作精美可视化大屏

前言在开发可视化项目的过程中往往涉及到可视化图表,我们看到的很多酷炫的报表,大屏,都用了非常多的图表,接下来我和大家分享一些比较流行的开源免费的图表库.来源:趣谈前端公众号github:h...

JavaScript Charts更新至v3.15.2

JavaScriptCharts是兼容性好的JavaScript、HTML5图表开发工具,能满足大部分的开发需求,包括序列图表(列型图,条形图,线型图,面积图,步骤折线图,平滑折线图,蜡烛图,ohl...

JavaScript Charts更新至v3.17.0

JavaScriptCharts兼容性好的JavaScript、HTML5图表开发工具,能满足大部分的开发需求,包括序列图表(列型图,条形图,线型图,面积图,步骤折线图,平滑折线图,蜡烛图,ohlc...

最实用的大数据可视化分析工具汇总

四十三、OpenHeatMapOpenHeatMap简单易用,用户可以用它上传数据、创建地图、交流信息。它可以把数据(如GoogleSpreadsheet的表单)转化为交互式的地图应用,并在网上分享...

JavaScript Charts v3.17.3发布

JavaScriptCharts兼容性好的JavaScript、HTML5图表开发工具,能满足大部分的开发需求,包括序列图表(列型图,条形图,线型图,面积图,步骤折线图,平滑折线图,蜡烛图,ohlc...