🎀🎀🎀 microi-pageengine 界面引擎系列 🎀🎀🎀

一、Microi吾码：一款高效、灵活的低代码开发开源框架【低代码框架】
二、Vue3项目快速集成界面引擎
三、Vue3 界面设计插件 microi-pageengine 入门教程一
四、Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·上】
五、Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·中】
六、Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·下】

一、简介

【Microi吾码-界面设计器】 是一款基于 Vue3 + ElementPlus 的Web页面设计插件。是一款无状态、零耦合、可插拔的界面渲染工具，可以无缝集成到 web端、移动端。可以帮助开发人员、项目经理、产品经理快速搭建页面原型，可以设计动态看板、数据报表、精美图表等。

🔗体验地址：https://www.nbweixin.cn/autopage/

二、快速集成

2.1 创建Vue3项目

Vite 是一种新型前端构建工具，能够显著提升前端开发体验。我们推荐 Vite 方式创建，

🎯Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

1. 在需要创建项目的目录下打开 cmd，并输入以下命令：

npm create vite@latest

2. 之后根据自己所需按照提示操作即可，这里是使用 js 创建 vue3 项目。
   
3. 安装第三方依赖包
   在制作 npm 包的时候，把这些第三方依赖包排除掉了，所以得需要自己安装。其实这些包都是常用的包，打包进 npm 那体积就太大太臃肿。其他的依赖包我怕大家一个个安装麻烦就打包进 npm 发布包里。

      external: [
        'vue',
        'axios',
        'echarts',
        'element-plus',
        '@element-plus/icons-vue',
        'pinia',
        'sass',
        'sass-loader',
        'vue-router',
      ],

🎯所以我们必须要安装的组件包括：

• axios : npm install axios
• echarts: npm install echarts
• element-plus: npm install element-plus
• @element-plus/icons-vue: npm install @element-plus/icons-vue
• pinia: npm install pinia
• sass: npm install sass
• sass-loader: npm install sass-loader
• vue-router: npm install vue-router

最终安装结果：

 "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.8.3",
    "echarts": "^5.6.0",
    "element-plus": "^2.9.6",
    "pinia": "^3.0.1",
    "sass": "^1.86.0",
    "sass-loader": "^16.0.5",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },

完成以上步骤我们所依赖的第三方基础包就完成了，下面开始正式集成。

2.2 安装 microi-pageengine 依赖包

npm 包依赖项 参考 https://www.npmjs.com/package/microi-pageengine ,目前version 1.2.8 ,陆续会升级。

npm install microi-pageengine@latest

2.3 注册所有图标

因为UI框架使用的是 ElementPlus,所以需要在 main.js 注册所有图标。

// main.js
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

2.4 配置暗黑主题

在 main.js 引用暗黑模式样式。

import 'element-plus/theme-chalk/dark/css-vars.css'

2.5 创建views/designer.vue页面

设计引擎界面 专注于设计，如果展示结果则需要 渲染引擎界面。设计引擎和渲染引擎基本一样，一个使用组件 formDesigner ，一个使用 formRenderer 。

<template>
  <!-- 页面设计器 -->
  <formDesigner :remoteObj="remoteObj" />
  <!-- 页面渲染器 -->
  <!-- <formRenderer :remoteObj="remoteObj" /> -->
</template>

<script setup>
//引入组件
import { formDesigner, EventBus, usePageEngineStore } from 'microi-pageengine'
//引入样式
import 'microi-pageengine/style.css'

//本地组件
import { useRouter } from 'vue-router'
import { createPinia } from 'pinia'
import { onMounted, onBeforeUnmount, ref } from 'vue'

//用自己的路由处理组件内部跳转,通过EventBus监听处理内部事件,主打一个自由自在,随心所欲.
const router = useRouter()

//状态机传参,npm包没包把pinia打包进去,正所谓巧妇难为无米之炊,给她传一个完事
const pinia = createPinia()
const pageEngineStore = usePageEngineStore(pinia)

//传入数据,这个数据不知道什么格式,可以在设计器拖拽几个组件查看下页面JSON ,和渲染JSON一毛一样的
const remoteObj = ref({
  Id: '', //自定义页面ID
  Title: '', //自定义页面标题
  Number: '', //自定义页面编号
  Desc: '', //自定义页面描述
  JsonObj: {} | '', //对象或者字符串
})

//模拟加载远程数据
const loadFormData = () => {}

onMounted(() => {
  //如果需要token,设置token,该token一经接收即刻存入pinia状态机,每次调用接口通过拦截器自动处理token头,无需每次手动写,持久化用的localStorage ,可以F12查看
  pageEngineStore.setToken('')

  //下面这一大串监听,其实也可以写到一个事件里,通过key value 键值对来区分,暂时先这么着吧

  //监听保存页面JSON事件
  EventBus.on('saveFormJson', (saveFormJson) => {
    console.log('监听saveFormJson', saveFormJson)
  })

  //监听日历选择日期事件
  EventBus.on('calendarSelDate', (data) => {
    console.log('监听calendarSelDate', data)
  })

  //卡片更多跳转
  EventBus.on('cartMoreLink', (linkurl, linktype) => {
    console.log('监听cartMoreLink', linkurl, linktype)
    if (linktype == 'router') {
      router.push(linkurl)
    }
  })

  //链接组件跳转
  EventBus.on('linkWidget', (linkurl, linktype) => {
    console.log('监听linkWidget', linkurl, linktype)
    if (linktype == 'router') {
      router.push(linkurl)
    }
  })

  //鱼骨图跳转
  EventBus.on('fishWidget', (linkurl) => {
    console.log('监听fishWidget', linkurl)
    router.push(linkurl)
  })

  //步骤跳转
  EventBus.on('stepsWidget', (id, linkurl) => {
    console.log('监听stepsWidget', id, linkurl)
    router.push(linkurl)
  })

  //地图marker点击事件
  EventBus.on('mapMarkerClick', (item) => {
    console.log('监听mapMarkerClick', item)
  })
})

//销毁
onBeforeUnmount(() => {
  EventBus.off('saveFormJson')
  EventBus.off('calendarSelDate')
  EventBus.off('cartMoreLink')
  EventBus.off('linkWidget')
  EventBus.off('fishWidget')
  EventBus.off('stepsWidget')
  EventBus.off('mapMarkerClick')
})
</script>

<style>
.dark {
  background: #252525;
  color: white;
}
.light {
  background-color: white;
  color: black;
}
</style>

🎯注意：组件参数 :components 是自定义组件，如果界面引擎里的基础组件不能满足你的需求可以自行设计自己的小组件。这个我会单独出个专题讲，这里我们可以先忽略该参数。

2.6 main.js 代码

经过配置具体 main.js 代码如下：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
//暗黑模式颜色
import "@/styles/dark.scss";

import App from './App.vue'
import router from './router'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(ElementPlus, {
  locale: zhCn,
})

app.use(createPinia());

app.use(router)

app.mount('#app')

2.7 vite.config 代码

这里主要配置 path 使用 @ 代替 ./src ,熟悉vite应该都知道。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

2.8 router/index.js代码

这里有两个页面，一个是 designer 页面主要用来设计，renderer 页面主要用来渲染和最终呈现。

import { createRouter, createWebHistory } from 'vue-router'
import designer from '../views/designer.vue'
import renderer from '../views/renderer.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'designer',
      component: designer,
    },
    {
      path: '/renderer',
      name: 'renderer',
      component: renderer,
    }
  ],
})

export default router

2.9 styles/dark.scss 暗黑模式代码

@forward "element-plus/theme-chalk/src/dark/var.scss" with (
  $colors:(
           //这里定义在暗黑模式下 primary 的颜色，其他同理
          // "primary": ("base": green),
  )
);
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

2.10 App.vue 代码

<script setup>
import { RouterView } from 'vue-router'
</script>
<template>
  <RouterView />
</template>

2.11 最终目录

三、运行查看成果

vscode 输入指令

npm run dev

运行结果：

恭喜你，界面引擎已经集成完成。demo 源码我已上传到资源库，请自行下载：
https://download.csdn.net/download/mss359681091/90494020

四、总结

这一篇介绍如何快速集成界面设计引擎，后续我会慢慢介绍如何自定义组件，介绍每个组件的具体用法。如果是 vue2 或者 web 项目，可以通过 iframe 方式集成。

五、推广

Microi吾码 是一款轻量级、高性能的开源框架，旨在简化开发流程，提升开发效率。它支持多种编程语言，并提供了丰富的模块和插件，帮助开发者快速构建高质量的应用程序。

• 🐋技术栈：.NET9 + Dos.ORM + Vue3 + ElementPlus + UniAppX
• 📖官方文档：🔗https://doc.microi.net/
• 🌈Vue3版本演示地址：🔗https://microi.net
• 🌈Vue2版本演示地址：🔗https://demo.microi.net
• 🪧Gitee开源地址：🔗https://gitee.com/ITdos/microi.net
• 🪧GitCode开源地址：🔗https://gitcode.com/microi-net/microi.net/overview
• 🎀官方CSDN博客：🔗https://microi.blog.csdn.net
• 🎀技术CSDN博客：🔗https://lisaisai.blog.csdn.net/?type=blog

📢 推广：如果想购买 Microi吾码 开源框架 个人会员版（可二开商用版），可以报我的 CSDN 名 “microi风闲” 或者 报我的姓名 “李赛赛” 即可享受减免优惠 99 元。不但能减免还能提供一定的技术支撑，和各种插件的持续升级和一对一教学。🎉🧧🎊🎇🎈