--- theme: channing-cyan highlight: arduino-light --- 低代码盛行多年了，刚好公司最近有项目需要做这块，从萌新小白，到实现程序，一步一步踩过了很多坑，今天就把我踩过的坑一一分享出来，带你扫盲如何实现低代码，今天我们就从0开始，使用vue+pinia实战低代码！希望通过我的分享，你能收获到低代码是如何实现，工作的等一系列的问题，话不多说，直接上干货！ ### 项目初始化直接执行以下脚手架命令，生成一个新的项目模板，如有疑问可参考官网[https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application](url) ```js npm init vue@latest ``` 执行命令，一路选No，在✔ Add Pinia for state management? … No / Yes此条命令时，选择yes，如此项选择了no，后面需自己手动在安装下pinia。进入项目目录执行 ```js npm install npm run dev ``` 此时如果你的项目没有问题，会打开一个本地服务，端口为5173，我们在浏览器直接输入localhost:5173,会打开一个页面，如下图，标志着你已经开启了一段新的旅程！ ![1.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aca6b0a1aa6e4cfb917ef72901bf897b~tplv-k3u1fbpfcp-watermark.image?) ok，我们删除一些不必要的默认文件保持整个项目的整洁，我们把components下所有组件都删除，把app.vue文件整理成如下： ```js ``` 此时查看浏览器你的页面应该变成了一句话，起航吧少年郎！！！下面我们安装一些必要的npm包，首先我们安装css预处理器 sass和sass-loader，然后我们安装vue-draggable-next（ps：vue3兼容包，老包不兼容vue3），用来处理我们拖曳操作，好的让我们执行 `npm install --save sass sass-loader vue-draggable-next`，安装完成后，我们在app.vue文件中将样式部分修改为： ```js ``` 查看页面没有报错，文字正常显示。 ### 项目实现这部分主要是一步一步的去实现项目 ##### 1：实现布局首先我们在页面完成，页面布局，这部分大家自由去做就行了，做完以后大概就是这个样式 ![2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2928052da11f4fb6a2ed630565f62099~tplv-k3u1fbpfcp-watermark.image?) 上部分是个页面头部，左侧放我们的组件，右侧放组件的设置属性，中间部分是渲染区。我们安装一下element-plus和vue-router，后面我们实现预览和开发组件的时候会用到。直接按照配置进行就可以： [element-ui官网](https://element-plus.gitee.io/zh-CN/guide/installation.html#使用包管理器) [vue-router官网](https://router.vuejs.org/zh/installation.html) ##### 2：实现数据定义和拖曳区，渲染区下面我们实现两个组件，这里我用比较简单的组件来实现操作，后续业务的话可以根据实际去调整！首先我们在store文件中定义如下json，这里是我们的数据中心，我们所有的组件渲染，页面渲染都需要使用数据去完成 ```js import { defineStore } from "pinia"; export const useLowCodeStore = defineStore({ id: "lowcode", // id必填，且需要唯一 state: () => { return { component: [ { code: "button", set: "button-set", name: "按钮", id: 1, //组件编号不可重复且递增 props: { type: "primary", }, }, { code: "input", set: "input-set", name: "输入框", id: 2, //组件编号不可重复且递增 props: { value: "", placeholder: "请输入内容", }, }, ], preview: {}, nowComponent: {}, }; }, actions: {}, }); ``` 回到主页面，调用数据，渲染出对应的组件，并且实现拖曳，我们这里借用了vue-drag-next包帮助我们去做拖曳的事件操作。下面我们完成可拖曳区代码：可拖曳实现： ```js

``` 渲染区实现 ```js ``` 好了到这里我们基本完成了主要的功能，如果你没有出现错误，那么页面应该是下面这个样子 ![222.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe2252bc6cdb4dbbb5e1de32a8ec0ded~tplv-k3u1fbpfcp-watermark.image?) 接下来让我们去实现两个简单的组件 ##### 3：实现组件及属性设置 1：先来写个简单的button组件在components文件夹下新建button文件，在button文件夹下面新建index.vue文件，这个文件是我们的组件，然后新建set.vue文件，这个文件是我们组件属性设置的文件。我们先来分析下我们定义的数据，button组件接收了两个数据，一个type，用来渲染样式，一个value用来渲染值，我们根据这两个属性去写我们的组件，其代码如下： ```js // 组件代码 // 属性设置代码 ``` 然后实现input组件 ```js // 属性设置代码 ``` ##### 4：实现拖曳渲染到这里我们基本易经完成了所有的开发工作，下面让我们把流程串起来就可以实现我们的低代码操作了首先在store中添加如下代码，用来实现我们的业务逻辑 ```js actions: { previewData(value) { this.preview.push(value); }, nowComponentsData(value) { this.nowComponent = value; }, updateNowComponents(value) { this.nowComponent = value; const index = this.preview.findIndex((item) => item.id === value.id); this.preview[index] = value; }, }, ``` 在app.vue中添加拖曳事件和引入我们的组件，我这里直接给出完整的代码 ```js ``` 好了，到这里已经完成实现了我们的拖曳操作，渲染，以及属性设置，如果没有错误结果应该如下图 ![333.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a930716f30e448bc8e358b36bf27f288~tplv-k3u1fbpfcp-watermark.image?) ### 页面实现好了上面我们已经实现了低代码操作，那么我们生成的数据，怎么供给到别的项目消费呢？我这里使用多页面的方式去处理的这个问题，这种方式比较简单，能解决90%的业务了吧！首先在根目录下新建preview文件夹，拷贝一份页面到preview中，修改vite.config.js的配置，增加多页面配置项目： ```js import { fileURLToPath, URL } from "node:url"; import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import * as path from "path"; // https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)), }, }, plugins: [vue()], build: { cssCodeSplit: true, // 如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中 sourcemap: false, // 构建后是否生成 source map 文件。如果为 true，将会创建一个独立的 source map 文件 target: "modules", // 设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值——'modules' 还可设置为 'es2015' 'es2016'等 chunkSizeWarningLimit: 550, // 单位kb 打包后文件大小警告的限制 (文件大于此此值会出现警告) assetsInlineLimit: 4096, // 单位字节（1024等于1kb）小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。 minify: "terser", // 'terser' 相对较慢，但大多数情况下构建后的文件体积更小。'esbuild' 最小化混淆更快但构建后的文件相对更大。 terserOptions: { compress: { drop_console: true, // 生产环境去除console drop_debugger: true, // 生产环境去除debugger }, }, rollupOptions: { input: { main: path.resolve(__dirname, "index.html"), preview: path.resolve(__dirname, "preview/index.html"), }, }, }, optimizeDeps: { include: [ "@vueuse/core", "element-plus", "vant", "lodash-es", "vuedraggable", ], }, }); ``` 此时我们点击确定按钮会打开一个新页面，就是我们渲染出来的页面，这里我们可以使用iframe的方式引入页面，只需要于后端沟通好数据存储，就可以渲染出我们任意拖曳生成的页面。到这里基本分享完了低代码的思路，我这里也是刚好最近公司需要做一个活动生成系统的项目，专门去看了下，根据自己的经验去实现了需求，可能还有更好的方式，这里抛转引玉了！！！你那么帅，那么美，留个赞再走吧！源码地址[源码地址：](https://gitee.com/SongTaoo/lowcode)https://gitee.com/SongTaoo/lowcode