可视化生成营销抽奖h5 第一天

Rocket
331 阅读2分钟

Hello,我是Rocket

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情

引言

  • 很久没有写文章了，其实最近一直在鼓弄vue前端项目，vue我大概自学了一个半月
  • 项目的灵感来源于 github.com/wangyuan389… github.com/woai3c/visu…
  • 公司内部是做私域流量营销saas平台的，不过我们的营销活动模板基本上每次改动都需要重新开发，我在想其实这个东在复杂一点当然定制开发也正常，我自己研究下其实这条路子是可行的，由于这个css基础比较差，样式方面老铁们不要太纠结，关键是标准和思路西很适合低代码，营销活动的流程其实大概分几种，报名、抽奖、任务达标、秒杀、答题，
  • github传送门
  • gitee传送门
  • 喜欢的铁子们给点个star

1、架构图

a.png

2、原理

  • 物料组件我理解其实应该分为基础组件和业务组件 ，业务组件可能有自己的处理逻辑事件等等，比如抽奖大转盘
  • 主要通过json元数据去描述，定义组件的 [交互逻辑]、[生命周期]、[样式展示]
  • 所以核心的点就在定义一套符合我们自己业务的规则

3、效果

1648884623663 (1).gif

视频链接

4、环境配置建议

node v14.0.0
npm 6.16.6

5、初始化

下载代码安装依赖

//克隆代码
git clone https://github.com/18211167516/SpeedUp
//切换到教学分支
git checkout teaching
//下载依赖包
yarn install

vue.config.js 修改

const path = require('path')

function resolve (dir) {
  return path.join(__dirname, dir)
} 

const src =  "1_src"  //你想看第几天的代码就切换成对应目录 
module.exports={
    configureWebpack:config=>{
      config.entry = './'+src+'/main.js'
    },
    chainWebpack: config => {
        // 别名配置
        config.resolve.alias
          .set('@', resolve(src))
          .set('components', resolve('{src}/components'))
    },
}

运行

yarn dev

6、目录结构

    ├─src  	            （项目核心目录）
    |  ├─assets         （资源目录）
    |  ├─components     （系统组件比如编辑区呀，物料组件区、配置区）
    |  ├─custom-components         （物料组件目录）
    |  ├─router         （路由）
    |  ├─store          （数据存储）
    |  ├─utils          （工具包）
    |  ├─views          （路由视图层）
    |  ├─App.vue        （app组件）
    |  ├─main.js        （入口文件）
    ├─public            （包含模板文件）
    ├─.gitigonre        （git的忽略配置文件）
    ├─babel.config.js  	（babel的配置文件，babel是js编译器）
    ├─package.json  	（npm包管理的配置文件）
    ├─vue.config.js     （vue的配置文件）

7、章节内容

  • 项目初始化
  • 划分模块 顶部 toolbar 左侧 ComponentList 中间 Editor 右侧 RightConfig
  • 定义路由 edit 编辑区 preview 预览
  • 引入element-ui （全部引入，后边在优化，先实现）
  • 代码大家就对应看吧，太简单了就不贴了

8、结尾

  • 低代码今年以来越演越烈，很多大厂也早就瞄准了这个版块，所以未来一定是有前景的
  • 我认为所有的sass类的，尤其的to B的sass服务商，低代码一定是降本增效的有效手段
  • 你可以不用，但是不能不知道，学学又不花钱
avatar
文章
阅读
粉丝