这是我参与8月更文挑战的第8天,活动详情查看:8月更文挑战。
这段时间手上活稍微有点多,所以自己的时间少了,只能每天晚上慢慢搞一会儿了,低代码项目暂时还没全部写完,现在目标只先做一些基础交互吧。
1. 项目准备
现在准备实现一个简单的vue低代码项目,首先确保node环境的安装,我们直接通过vue-cli脚手架创建一个vue项目
vue init webpack vueCode
项目创建完成后,考虑一下使用的UI框架,这边我们直接使用Element UI,同时安装scss或者less,在数据状态管理方面,vuex也是必选项之一。
yarn add element-ui scss scss-loader vuex
ps:安装完成之后记得在main.js中通过vue.use()引入一下。
关于图标的使用,我比较推荐阿里巴巴图标库iconfont,或者直接用Element的图标大多也可以支持。但是通过iconfont的项目管理,能够更清晰明了的实现图标的管控(以前做react-native项目的时候,用iconfont的svg图着实是个好东西,也因此对iconfront极其喜爱),使用教程官网都很详细,具体就不展开说了。
使用方法是在index.html中,直接引入即可。
<link rel="stylesheet" href="//at.alicdn.com/t/font_2759321_zeik9ykj7zs.css">
//定义公共样式
.iconfont {
font-family: "iconfont" !important;
font-size: 20px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
2.目录结构
项目结构每个人有每个人的理解,这个自己看着顺心就行。
主要讲一下自己的思路
src
- mixins: 因为组件有很多共同之处,所以可以提取出来,通过mixin混入
- packages:存放可拖拽组件
- theme:放一些公共样式,主题
- utils:常用工具类
- view:存放Demo页面,做了一个编辑器
- index.js 我准备把这块低代码做成组件插槽,可以在其他项目中使用,所以需要构建一个install方法,供vue.use使用。
第一版只做基础功能,暂时先不接入接口,支持拖拽组件生成页面,并修改组件中的一些属性。
这个gif转化不知道为啥把我样式都弄没了,实际长这样o(╥﹏╥)o
3. 项目思路
简要聊一下项目的实现思路,页面拖拽组件,最后保存时生成一串JSON数据,记录下标识和props;再进入页面时,根据组件标识和props去渲染对应的组件。理想状态JSON应该通过接口存到数据库,同时也可以加上版本控制等一系列项目安全工作。不过在这里为了简便点,我们就存在localStorage里面。
编辑页面分为三块
- 组件模块 存放自己的基础组件以及自定义组件,可进行拖拽。
- 容器模块 用于展示拖拽生成后的页面。根据JSON串去渲染组件。
- 属性模块 这里的属性是在注册组件时去获取组件里的props,将props循环展示在属性功能页,并支持修改。
先写这么多吧,下面的代码分析还得再过几天!!!