Giter VIP home page Giter VIP logo

sparrow-js / sparrow Goto Github PK

View Code? Open in Web Editor NEW
3.1K 89.0 450.0 40.88 MB

🎉场景化低代码(LowCode)搭建工作台,实时输出源代码

Home Page: https://sparrow-js.github.io/sparrow-vue-site/

License: MIT License

JavaScript 14.30% HTML 4.76% Vue 12.70% TypeScript 64.35% CSS 3.66% SCSS 0.24% Dockerfile 0.01%
sparrow-js vue element-ui vue-admin editor lowcode vue-builder sparrowjs site-generator sparrow

sparrow's Introduction

wx(有具体事情可加):sparrow777-js

新分支,主要功能是源代码编辑和与chatgpt的结合,持续开发中感兴趣可以关注:https://github.com/sparrow-js/sparrow/tree/sparrow-next

sparrow

图片名称

图片名称图片名称

场景化低代码(LowCode)搭建工作台;

sparrow的核心目标仅有一条“提升研发效率”,目前提供基于vue、element-ui组件库中后台项目的实践,实时输出源代码,新功能持续新增中;


特性

  • 低代码开发, 快速生成可读性强、vue element-ui组件库的源代码。
  • 可视化开发, 通过GUI生成页面代码源文件。
  • 资产市场, 代码资源共享,包含组件、编辑区块、静态区块、搜索业务组件、插件、场景搭建编辑器。

优势

  • sprarrow 的核心目标是“提效”,因此功能上不只是单纯UI的可视化搭建,目前提供函数级别的搭建,提供拥有业务逻辑的代码组装,生成可二次开发的源代码;
  • 易于扩展,通过AST读取组件源代码,进行组合,只要页面的逻辑是可拆解的就可以任意组装;
  • 可与项目结合,技术上采用本地运行server服务,可以与项目深度结合,实现更多提效手段,更大可操作空间;

快速使用

线上版

线上体验版,代码生成worker、浏览器构建、可视化操作、实时输出源代码、多种类型物料源,更多精彩内容逐步开放

https://sparrow-js.github.io/sparrow-online/


全局安装

# 全局安装
$ npm install -g sparrow-code

# 运行
$ sparrow

项目内安装

# 项目内安装
$ npm install sparrow-code -D

# package.json 增加 sparrow
"scripts": {
  "sparrow": "sparrow start -m page"
}

# 项目内安装GUI组件
$ npm install @sparrow-vue/develop-ui -S

# 项目内引用App.vue
<template>
  <div id="app">
    <router-view />
    <sparrow />
  </div>
</template>

<script>
import Sparrow from '@sparrow-vue/develop-ui'

export default {
  components: {
    Sparrow
  },
  name: 'App'
}
</script>

功能

物料

sparrow 提供多种类型的物料源,以此提升研发效率。

  • 组件:vue element-ui基础组件
  • 容器:存储基础组件
  • 编辑区块:可增删改的特定场景代码片段
  • 静态区块:代码片段
  • 搜索组件:官方内置拥有特定逻辑组件
  • 插件:第三方自定义组件

基础功能

  • 实时预览
  • 拖拽
  • 实时预览源代码
  • 组件: 复制
  • 组件: 删除
  • 组件: 配置
  • 撤销
  • 保存
  • 导出
  • 重置
  • 接口生成
  • 打开vscode展示代码
  • 文本编辑
  • 等等功能

讨论(本项目没有群,讨论可发到github discussions)

License

MIT

sparrow's People

Contributors

fishplusorange avatar sparrow-js avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sparrow's Issues

vue3

请问一下这个可以在vue3的项目里引入吗

项目内安装,引用不成功

项目内安装

$ npm install sparrow-code -D

package.json 增加 sparrow

"scripts": {
"sparrow": "sparrow start -m page"
}

项目内安装GUI组件

$ npm install @sparrow-vue/develop-ui -S

项目内引用App.vue

<script> import Sparrow from '@sparrow-vue/develop-ui' export default { components: { Sparrow }, name: 'App' } </script>

运行报错:

[Vue warn]: Failed to mount component: template or render function not defined.

组件能拖拽,但是不能拖拽到容器中

image

组件能拖拽,但是不能拖拽到容器中,比如先拖了一个表单容器进去, 然后向这个表单中拖进新的输入框, 放手后就会出现在表单外(下面),而不是表单内部

小小使用后的感受

1、希望支持拖拽功能
2、希望可以设置高度、宽度,同时高亮的时候,可以显示高度区域的高度和宽度
3、希望已选组件右击可删除,或者右上角有个删除按钮,而不是需要到属性里面去删除
希望对你有帮助

关于框架实现的一些问题

目前还在探索阶段,想请教下关于web页面的拖拽预览的实现原理是怎样的,特别是组件的嵌套,预览代码和最终生产代码是如何分离的。

请问编辑时预览功能是如何实现的?

我理解是前端实现了一套webpack机制,每次编辑修改,会导致前端 webpack 中 源码asset修改,进而触发 hmr 或者全量render

请问这套方案有开源的解决吗

无法启动

使用script命令启动的时候无法启动
报错如下:

npm verb node v16.13.1
npm verb npm  v8.4.1
npm ERR! code ERESOLVE

npm ERR! ERESOLVE could not resolve

npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   peer eslint@">= 1.6.0 < 7.0.0" from @vue/[email protected]
npm ERR!   node_modules/@vue/cli-plugin-eslint
npm ERR!     dev @vue/cli-plugin-eslint@"^4.1.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @vue/eslint-config-standard@"^5.0.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^7.0.0 || ^8.0.0" from [email protected]
npm ERR!   node_modules/eslint-plugin-promise
npm ERR!     peer eslint-plugin-promise@">= 4.2.1" from @vue/[email protected]
npm ERR!     node_modules/@vue/eslint-config-standard
npm ERR!
       dev @vue/eslint-config-standard@"^5.0.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See E:\Tools\nodejs\node_cache\eresolve-report.txt for a full report.
npm verb exit 1

我的所有相关的eslint依赖都已经移除,还是无法启动,提示:安装依赖失败,重新安装。

项目内安装,运行报错,请问能帮忙解决一下吗

PS C:\Users\Administrator\Desktop\sparrow-demo> npm run sparrow

[email protected] sparrow
sparrow start -m page

sparrow view Core: 0.1.0 C:\Users\Administrator.sparrow\sparrow-server
sparrow view Core: 0.4.3 C:\Users\Administrator.sparrow\sparrow-server
sparrow Core: 0.9.27 C:\Users\Administrator.sparrow\sparrow-server
ϵͳ�Ҳ���ָ����·����

😞 Start sparrow failed

Error: spawn C:\Users\Administrator.sparrow\sparrow-server\node_modules.bin\egg-scripts ENOENT
at notFoundError (C:\Users\Administrator\Desktop\sparrow-demo\node_modules\sparrow-code\node_modules\execa\node_modules\cross-spawn\lib\enoent.js:6:26)
at verifyENOENT (C:\Users\Administrator\Desktop\sparrow-demo\node_modules\sparrow-code\node_modules\execa\node_modules\cross-spawn\lib\enoent.js:40:16)
at ChildProcess.cp.emit (C:\Users\Administrator\Desktop\sparrow-demo\node_modules\sparrow-code\node_modules\execa\node_modules\cross-spawn\lib\enoent.js:27:25)
at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12) {
code: 'ENOENT',
errno: 'ENOENT',
syscall: 'spawn C:\Users\Administrator\.sparrow\sparrow-server\node_modules\.bin\egg-scripts',
path: 'C:\Users\Administrator\.sparrow\sparrow-server\node_modules\.bin\egg-scripts',
spawnargs: [
'start',
'--title=sparrow-server',
'--framework=midway-mirror',
'--workers=1',
'--sticky',
'--project=C:\Users\Administrator\Desktop\sparrow-demo'
]
}
PS C:\Users\Administrator\Desktop\sparrow-demo>

本地无法运行自查

1.查看node版本,v11以上
2.检测项目安装情况:cd ~/.sparrow/sparrow-server/ 主界面服务,cd ~/.sparrow/sparrow-view 预览服务
3.搞不定,提issues

如何使用?

问题

安装到本地,启动后,具体如何使用?是否能提供一个在线demo?

环境

  • ubuntu 16.04
  • node v12.19.0
  • chrome 86

操作步骤

  1. 全局安装并启动
  2. 打开页面
  3. 点击/拖拽添加组件到内容区域
    Peek 2020-11-04 13-20

结果

  1. 无法添加组件
  2. 切换左侧侧边栏时控制台报错
    image
    image
    终端 log如下
    image

本地玩不转

不知道怎么在本地玩起来,方便写一个文档吗?走一步一个坑

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.