This is the 8th day of my participation in the August More Text Challenge.

During this period of time, I have a little too much work on hand, so I have less time, so I can only work on it slowly every night. For the time being, I haven’t finished all the low-code projects, and now I only want to do some basic interaction first.

1. Project preparation

Now we are ready to implement a simple Vue low-code project. First, by ensuring that the Node environment is installed, we create a Vue project directly from the VUe-CLI scaffolding

vue init webpack vueCode

After the project is created, consider the UI framework to use. Here we will use Element UI directly, while installing SCSS or less. Vuex is also a must for data state management.

yarn add element-ui scss scss-loader vuex

Ps: Remember to introduce it in main.js via vue.use() after installation.

As for the use of ICONS, I recommend alibaba icon library iconfont, or directly using Element’s ICONS can also be supported. However, through iconfont project management, icon management can be more clearly implemented. (In the past, when doing react-Native project, using Iconfont SVG diagram is really a good thing, so I like Iconfront very much.)

You can use it in index. HTML by importing it directly.

<link rel="stylesheet" href="//at.alicdn.com/t/font_2759321_zeik9ykj7zs.css">

// Define common styles
.iconfont {
    font-family: "iconfont"! important; font-size: 20px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }Copy the code

2. Directory structure

Everyone has their own understanding of the structure of the project, as long as it looks good to them.

I want to talk about my ideas

src - mixins: Because components have a lot in common, they can be extracted by mixin - packages: store draggable components - theme: put some common styles, theme - utils: common utility class - view: I'm going to make this piece of low code into a component slot that can be used in other projects, so I need to build an install method for vue.use.Copy the code

The first version only does the basic function, temporarily does not access the interface, support to drag and drop components to generate pages, and modify some attributes of components.

I don’t know why this GIF conversion is missing the style, actually looks like this O (╥﹏╥) O

3. Project idea

A brief talk about the implementation ideas of the project, page drag component, and finally save to generate a string of JSON data, record the identity and props; When entering the page again, render the corresponding component according to the component id and props. Ideally, JSON should be stored in the database via the interface, and a number of project security functions such as version control can also be added. But in this case, for simplicity, we’re going to store it in localStorage.

The edit page is divided into three sections

  • The component module

Store your own base components and custom components, which can be dragged and dropped.

  • Containers module

Use to show the drag-and-drop generated page. Render components from JSON strings.

  • The attribute module

The properties here are to get the props of the component when registering the component, display the props loop on the properties page, and support modifications.

Write so much for now, the following code analysis will take a few more days!!