vue3低代码平台-前端出码_vue3 低代码

作者：繁依Fanyi0 | 2024-05-12 09:54:54

踩

vue3 低代码

前言

在上一篇基于freemarker生成源码后，考虑到还需要起一个后端服务才能生成代码并下载，增加的不少麻烦，便想着试试通过前端生成源码并导出。前端的源码导出不止可以用到低代码平台上，当前端项目有一些简易的导出工作也可以通过这个方式实现对应的功能，项目开源地址：https://gitee.com/xxt2286621910/easy-code要是对项目感兴趣，欢迎加入到项目的开发中来

简介

导出代码需要用到file-saver（用于生成下载的文件），jszip（用于将多个页面压缩使用），prettier（格式化前端文本代码），ecTemplate（用于装配json数据生成对应的文件）ecTemplate是由于没找到合适的便自己动手实现了一个简易的模板引擎，若有比较好的解决方案，希望大家可以在评论区给出。

功能实现

模板编辑

模板功能实现是基于 `` ，${}可以调用方法，或者直接使用三元表达式进行判断。自定义一个for循环的方法用于向模板中插入对应的属性值。includeTemplate 用于查询其他的模板用作模板嵌套使用，ComponentListStore.componentTemplates 用于保存组件的模板

**ecTemplateFor：**当传入的list为数组类型时向回调函数中传入value和index，若为Object则传递value和key

**includeTemplate：**当需要嵌套使用模板时便可传入对应的模板名，查询ComponentListStore.componentTemplates 并返回对应模板内容

import {coreTemplate} from "./coreTempalte/coreTemplate";
import {ComponentListStore} from "../stores/counter";
// 核心模板
export function ecTemplate(data){
    return coreTemplate(data)
}
// 循环功能list 循环的列表、method回调函数
export function ecTemplateFor(list,method){
    let result = ''
    if(Array.isArray(list)){
        let length = list.length
        for (let i = 0; i < length; i++) {
            if(method(list[i],i)!==''){
                result = result+method(list[i],i)+'\n'
            }
        }
    }else{
        for(let key in list){
            if(method(list[key],key)!==''){
                result = result+method(list[key],key)+'\n'
            }
        }
    }
    return result
}
// 用于查询子模版。用作子模版嵌套使用
export function includeTemplate(template,param){
    const componentListStore = ComponentListStore()
    if(componentListStore.componentTemplates.hasOwnProperty(template)){
        return componentListStore.componentTemplates[template](param)
    }
    return ""
}
// 生成通用模板 加载事件、属性、ref等
export function generalTemplate(param,filtrate){
    let filtrates = {attr:[]}
    if(filtrate){
        filtrates = filtrate
    }
    return `\n
        ${param.styles && JSON.stringify(param.styles) !== "{}"?`:style='${JSON.stringify(param.styles)}'`:''}\n
        ${param.bindClass && param.bindClass !==""?`class="${param.bindClass}"`:''}\n
        ${generateAttribute(param.attributes,param.defaultAttributes,filtrates.attr)}\n
        ${ecTemplateFor(param.events, (item,k) => {
        if (item.enable) {
            return `@${k}="${item.method}"`
        }
        return ''
    })}\n
    `
}
// 属性加载方法 attributes 属性列表、defaultAttributes 默认属性值列表、filtrate 过滤不展示的属性
export function generateAttribute(attributes,defaultAttributes,filtrate){
    return `\n
        ${ecTemplateFor(attributes, (item,k) => {
        if(filtrate && filtrate.indexOf(k)!==-1){
            return ''
        }
        if ((typeof item === "boolean" && defaultAttributes[k] !== item)) {
            return `:${k}="${item}"`
        }
        if ((typeof item === "number" && item !== 0) && defaultAttributes[k] !== item) {
            return `:${k}="${item}"`
        }
        if ((typeof item === "string") && item !== '' && defaultAttributes[k] !== item) {
            if(k.includes("-slot")){
                return ""
            }
            if(k.includes("Ref")){
                return `ref="${item}"`
            }else if(k === "modelValue"){
                return `v-model="${item}"`
            }else if(k.includes("-bindValue")){
                return `:${k.replace("-bindValue","")}="${item}"`
            }else{
                return `${k}="${item}"`
            }
        }
        return ''
    })}`
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

ScButton模板

generalTemplate 加载通用的模板方法，用于传入属性、事件等配置，{attr:[“label”]}过滤掉attributes中的label属性

template: (param)=>{
    return `
    <el-button
    ${generalTemplate(param,{attr:["label"]})}
    >
    ${param.attributes.label !==""?`${param.attributes.label }`:''} 
    </el-button>
    `
}
1
2
3
4
5
6
7
8
9

ScLayout模板

template:(param)=>{
    return `
    <el-row
    ${generalTemplate(param)}
     >
    ${ecTemplateFor(param.children, (citem,k) => {
        return `<el-col ${generateAttribute(param.attributes['col'][k],param.defaultAttributes['col'][k],['span'])}
                :span="${param.attributes['col'][k]["span"]}">
            ${ecTemplateFor(param.children[k].children,(item2)=>{
            return includeTemplate(item2.component,item2)})}
        </el-col>`
    })}
     </el-row>
    `
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

格式化文本

由于模板生成的问题可能会导致输出的源码看起来乱糟糟，变将根据模板引擎生成的文本通过formatText方法格式化之后在进行输出。格式化代码使用的是prettier，prettier.format()返回的是promise函数，由于生成页面时需要同时生成多个页面，并将多个页面压缩到一个zip中便增加了同步方法。prettier官网Prettier 中文网 · Prettier 是一个“有态度”的代码格式化工具

安装prettier

npm install prettier
1

import prettier from "prettier/standalone"
import parserHtml from "prettier/plugins/html" // 格式化html
import parserCss from "prettier/plugins/postcss" // 格式化css文本

// 格式化文本text文本、type语言类型
export async function formatText(text, type) {
    try {
        if (!type || type === "javascript" ) return text
        let result = ""
        let plugin = null
        let vueIndentScriptAndStyle = false
        if (type === "css") {
            plugin = parserCss
            type = "css"
        }
        if (type === "html") {
            type = "html"
            plugin = parserHtml
            vueIndentScriptAndStyle = true
        }
        if (plugin !== null) {
            await prettier.format(text, {
                parser: type,
                plugins: [plugin],
                vueIndentScriptAndStyle: vueIndentScriptAndStyle
            }).then(data => {
                result = data
            })
        }
        return result
    }catch (e){
        console.log(e)
        ElMessage({message: "有错误请检查后在进行保存", type: 'warning', duration: 2000, showClose: true,})
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

出码

通过循环遍历需要导出的数据，并根绝pageName参数作为文件名，页面数据通过模板引擎处理后，将结果通过formatText格式化最后将文本转为二进制对象，并放入zip.file中并导出

安装jszip

npm install jszip
1

// 输出源码
export async function generateCode(exportPage) {
    // 加载zip模块用于压缩多个页面
    let zip = new JSZip()
    for (const item of exportPage) {
        let data = await formatText(ecTemplate(item),"html")
        let blob = new Blob([data], {type: "text/json;charset=utf-8"});
        zip.file(item.pageName + ".vue", blob, {binary: true})
    }
    zip.generateAsync({type: "blob"}).then(content => {
        // 生成二进制流
        saveAs(content, "easyCode源码"); // 利用file-saver保存文件  自定义文件名
    });

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

exportPage格式

[
  {
    "type": "page",
    "pageName": "1",
    "label": "1",
    "children": [
      {
        "component": "ScLayout",
        "label": "行",
        "event": {},
        "attributes": {
          "justify": "start",
          "align": "start",
          "gutter": 0,
          "col": [
            {
              "span": 24,
              "offset": 0,
              "push": 0,
              "pull": 0,
              "xs": null,
              "sm": null,
              "md": null,
              "lg": null,
              "xl": null
            },
            {
              "span": 24,
              "offset": 0,
              "push": 0,
              "pull": 0,
              "xs": null,
              "sm": null,
              "md": null,
              "lg": null,
              "xl": null
            }
          ]
        },
        "styles": {},
        "children": [
          {
            "component": "container",
            "attribute": "col",
            "label": "列",
            "id": "e03373e1-d61b-421c-ad50-73ad0c905cd4",
            "event": {},
            "attributes": {},
            "styles": {},
            "children": [
              {
                "component": "ScButton",
                "label": "按钮",
                "animations": [],
                "events": {
                  "click": {
                    "enable": false,
                    "method": ""
                  }
                },
                "attributes": {
                  "type": "primary",
                  "size": "default",
                  "label": "按钮",
                  "plain": false,
                  "round": false,
                  "disabled": false,
                  "circle": false,
                  "loading": false,
                  "loading-icon": "Loading",
                  "icon": "",
                  "autoInsertSpace": false,
                  "color": "",
                  "dark": false
                },
                "styles": {},
                "shapeStyles": {
                  "display": "inline-flex"
                },
                "status": {
                  "active": false,
                  "activeContainer": false,
                  "isHidden": false,
                  "lock": false
                },
                "type": "common",
                "bindClass": "",
                "defaultAttributes": {
                  "type": "primary",
                  "size": "default",
                  "label": "按钮",
                  "plain": false,
                  "round": false,
                  "disabled": false,
                  "circle": false,
                  "loading": false,
                  "loading-icon": "Loading",
                  "icon": "",
                  "autoInsertSpace": false,
                  "color": "",
                  "dark": false
                },
                "id": "1991ebc8-ed13-4a45-a631-13c96e915a06",
                "featherId": "e03373e1-d61b-421c-ad50-73ad0c905cd4"
              }
            ],
            "featherId": "cff86dbe-8598-40d4-aca6-3e05c9dd3ccf",
            "type": "container",
            "status": {
              "active": false,
              "activeContainer": false,
              "isHidden": false,
              "lock": false
            }
          },
          {
            "component": "container",
            "attribute": "col",
            "label": "列",
            "id": "3212d0d4-4de0-462c-822d-68d740defa6c",
            "event": {},
            "attributes": {},
            "styles": {},
            "children": [],
            "featherId": "cff86dbe-8598-40d4-aca6-3e05c9dd3ccf",
            "type": "container",
            "status": {
              "active": false,
              "activeContainer": false,
              "isHidden": false,
              "lock": false
            }
          }
        ],
        "type": "container",
        "status": {
          "active": false,
          "activeContainer": false,
          "isHidden": false,
          "lock": false
        },
        "bindClass": "",
        "defaultAttributes": {
          "justify": "start",
          "align": "start",
          "gutter": 0,
          "col": [
            {
              "span": 24,
              "offset": 0,
              "push": 0,
              "pull": 0,
              "xs": null,
              "sm": null,
              "md": null,
              "lg": null,
              "xl": null
            },
            {
              "span": 24,
              "offset": 0,
              "push": 0,
              "pull": 0,
              "xs": null,
              "sm": null,
              "md": null,
              "lg": null,
              "xl": null
            }
          ]
        },
        "id": "cff86dbe-8598-40d4-aca6-3e05c9dd3ccf",
        "featherId": "editor"
      }
    ],
    "status": {
      "active": false
    },
    "data": {},
    "ecVueInfo": "export default{ \n name:\"1\", \n mounted(){ \n}, \n data(){\n return{ \n     colorValue:\"yellow\",\n     inputValue:\"hello\",\n     data:[\n         {value:\"name\",label:\"name\"}\n         ]\n }}, \n methods:{\n} \n}",
    "EcVue": {
      "$options": {
        "name": "1",
        "methods": {}
      },
      "_data": {
        "colorValue": "yellow",
        "inputValue": "hello",
        "data": [
          {
            "value": "name",
            "label": "name"
          }
        ]
      },
      "$refs": {}
    },
    "css": "",
    "id": "c29ec373-1b4d-458b-bd08-b0565f72c30e"
  },
  {
    "type": "page",
    "pageName": "2",
    "label": "2",
    "children": [
      {
        "component": "ScLayout",
        "label": "行",
        "event": {},
        "attributes": {
          "justify": "start",
          "align": "start",
          "gutter": 0,
          "col": [
            {
              "span": 24,
              "offset": 0,
              "push": 0,
              "pull": 0,
              "xs": null,
              "sm": null,
              "md": null,
              "lg": null,
              "xl": null
            },
            {
              "span": 24,
              "offset": 0,
              "push": 0,
              "pull": 0,
              "xs": null,
              "sm": null,
              "md": null,
              "lg": null,
              "xl": null
            }
          ]
        },
        "styles": {},
        "children": [
          {
            "component": "container",
            "attribute": "col",
            "label": "列",
            "id": "9e766ea8-202a-4c9c-ab36-079c14784240",
            "event": {},
            "attributes": {},
            "styles": {},
            "children": [],
            "featherId": "4f82046c-8379-45af-b1b9-9dbb52563923",
            "type": "container",
            "status": {
              "active": false,
              "activeContainer": false,
              "isHidden": false,
              "lock": false
            }
          },
          {
            "component": "container",
            "attribute": "col",
            "label": "列",
            "id": "daa4fb26-df81-4cf1-a09b-6b678d0e71cb",
            "event": {},
            "attributes": {},
            "styles": {},
            "children": [],
            "featherId": "4f82046c-8379-45af-b1b9-9dbb52563923",
            "type": "container",
            "status": {
              "active": false,
              "activeContainer": false,
              "isHidden": false,
              "lock": false
            }
          }
        ],
        "type": "container",
        "status": {
          "active": false,
          "activeContainer": false,
          "isHidden": false,
          "lock": false
        },
        "bindClass": "",
        "defaultAttributes": {
          "justify": "start",
          "align": "start",
          "gutter": 0,
          "col": [
            {
              "span": 24,
              "offset": 0,
              "push": 0,
              "pull": 0,
              "xs": null,
              "sm": null,
              "md": null,
              "lg": null,
              "xl": null
            },
            {
              "span": 24,
              "offset": 0,
              "push": 0,
              "pull": 0,
              "xs": null,
              "sm": null,
              "md": null,
              "lg": null,
              "xl": null
            }
          ]
        },
        "id": "4f82046c-8379-45af-b1b9-9dbb52563923",
        "featherId": "editor"
      },
      {
        "component": "ScButton",
        "label": "按钮",
        "animations": [],
        "events": {
          "click": {
            "enable": false,
            "method": ""
          }
        },
        "attributes": {
          "type": "primary",
          "size": "default",
          "label": "按钮",
          "plain": false,
          "round": false,
          "disabled": false,
          "circle": false,
          "loading": false,
          "loading-icon": "Loading",
          "icon": "",
          "autoInsertSpace": false,
          "color": "",
          "dark": false
        },
        "styles": {},
        "shapeStyles": {
          "display": "inline-flex"
        },
        "status": {
          "active": false,
          "activeContainer": false,
          "isHidden": false,
          "lock": false
        },
        "type": "common",
        "bindClass": "",
        "defaultAttributes": {
          "type": "primary",
          "size": "default",
          "label": "按钮",
          "plain": false,
          "round": false,
          "disabled": false,
          "circle": false,
          "loading": false,
          "loading-icon": "Loading",
          "icon": "",
          "autoInsertSpace": false,
          "color": "",
          "dark": false
        },
        "id": "eb016967-e3ca-44c3-8afe-3f46ae19e463",
        "featherId": "editor"
      }
    ],
    "status": {
      "active": false
    },
    "data": {},
    "ecVueInfo": "export default{ \n name:\"2\", \n mounted(){ \n}, \n data(){\n return{ \n }}, \n methods:{\n} \n}",
    "EcVue": {
      "$options": {
        "methods": {}
      },
      "_data": {},
      "$refs": {}
    },
    "css": "",
    "id": "7df39bbe-edaf-4bb8-a04f-7dc1b7d70b89"
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389

结果

<template>
  <div>
    <el-row>
      <el-col :span="24"> </el-col>
      <el-col :span="24"> </el-col>
    </el-row>

    <el-button> 按钮 </el-button>
  </div>
</template>
<script>
      export default{
   name:"2",
   mounted(){
  },
   data(){
   return{
   }},
   methods:{
  }
  }
</script>
<style scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/558517