这是我参与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循环展示在属性功能页，并支持修改。
先写这么多吧，下面的代码分析还得再过几天！！！
