基于Vue 3的低代码平台工作区解决方案实战

基于Vue 3的低代码平台工作区解决方案实战

前言

低代码平台的开发涉及多个技术栈的整合，本文将从实战角度出发，详细讲解基于 Vue 3 + TypeScript + Pnpm Workspace + 微前端架构的低代码平台开发过程中遇到的问题及其解决方案。

技术栈概览

• 前端框架：Vue 3 + TypeScript
• 构建工具：Vite
• 包管理器：pnpm + Workspace
• UI框架：Element Plus
• 样式方案：TailwindCSS
• 微前端方案：wujie
• 开发语言：TypeScript

1. pnpm工作区依赖管理问题

问题描述

在使用 pnpm workspace 进行多包管理时，经常遇到依赖安装的问题：

1. 安装依赖时提示错误
2. 依赖被安装到错误的位置
3. 子包之间的依赖引用问题

解决方案

1.1 工作区配置

首先在根目录配置 pnpm-workspace.yaml：

packages:
  - 'packages/*'
  - 'examples'
  - 'docs'

1.2 依赖安装命令

# 安装到工作区根目录
pnpm add -Dw postcss-nested

# 安装到特定子包
pnpm add @element-plus/icons-vue --filter @scope/sub-app-user

# 安装共享依赖
pnpm add vue@latest -W

# 子包间依赖
pnpm add @scope/shared --filter @scope/editor

1.3 优化依赖管理

在 package.json 中配置 publishConfig：

{
  "publishConfig": {
    "access": "public",
    "registry": "https://registry.npmjs.org/"
  },
  "peerDependencies": {
    "vue": "^3.3.0"
  }
}

2. PostCSS与TailwindCSS配置优化

问题描述

1. PostCSS 配置冲突
2. TailwindCSS 样式未生效
3. 构建性能问题

解决方案

2.1 PostCSS配置优化

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-nested': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

2.2 TailwindCSS配置优化

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    "./packages/*/index.html",
    "./packages/*/src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: colors.blue,
        secondary: colors.gray,
      },
      spacing: {
        '128': '32rem',
      }
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography')
  ],
  corePlugins: {
    preflight: false, // 避免与 Element Plus 样式冲突
  }
}

3. Vue 3组件最佳实践

3.1 Prop和事件处理

<script setup lang="ts">
interface Props {
  modelValue: string
  label?: string
  placeholder?: string
}

const props = withDefaults(defineProps<Props>(), {
  label: '',
  placeholder: '请输入'
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'change', value: string): void
}>()

const handleInput = (val: string) => {
  emit('update:modelValue', val)
  emit('change', val)
}
</script>

<template>
  <div class="form-field">
    <el-input
      :value="modelValue"
      :placeholder="placeholder"
      @input="handleInput"
    />
  </div>
</template>

3.2 组件通信优化

// composables/useEventBus.ts
import { InjectionKey } from 'vue'
import mitt from 'mitt'

export type Events = {
  'component:selected': { id: string; type: string }
  'component:updated': { id: string; props: any }
}

export const EventBusSymbol: InjectionKey<mitt<Events>> = Symbol('eventBus')

export const eventBus = mitt<Events>()

export function useEventBus() {
  return eventBus
}

4. 微前端架构实践

4.1 主应用配置

// main-app/src/main.ts
import { startApp } from 'wujie'

startApp({
  name: 'editor',
  url: 'http://localhost:8001',
  exec: true,
  alive: true,
  plugins: [{
    jsBeforeLoaders: [
      { content: `window.__INJECT_PUBLIC_PATH__ = '${process.env.PUBLIC_PATH}'` }
    ]
  }]
})

4.2 子应用生命周期

// sub-app/src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { setupStore } from './stores'
import { setupRouter } from './router'

let app: ReturnType<typeof createApp>

function initialize() {
  app = createApp(App)
  setupStore(app)
  setupRouter(app)
  return app
}

if (window.__POWERED_BY_WUJIE__) {
  window.__WUJIE_MOUNT = () => {
    app = initialize()
    app.mount('#app')
  }
  window.__WUJIE_UNMOUNT = () => {
    app?.unmount()
  }
} else {
  app = initialize()
  app.mount('#app')
}

5. 工程化优化

5.1 TypeScript配置优化

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,
    "paths": {
      "@/*": ["src/*"],
      "~/*": ["./*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

5.2 构建优化

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts'

export default defineConfig({
  plugins: [
    vue(),
    dts({
      insertTypesEntry: true,
      cleanVueFileName: true,
      copyDtsFiles: false
    })
  ],
  build: {
    target: 'es2015',
    minify: 'terser',
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'element-plus': ['element-plus']
        }
      }
    }
  },
  optimizeDeps: {
    include: ['vue', 'vue-router', 'pinia', 'element-plus']
  }
})

6. 性能优化最佳实践

6.1 组件懒加载

const EditorPanel = defineAsyncComponent(() => 
  import('./components/EditorPanel.vue')
)

const componentMap = {
  'form': defineAsyncComponent(() => 
    import('./components/FormRenderer.vue')
  ),
  'table': defineAsyncComponent(() => 
    import('./components/TableRenderer.vue')
  )
}

6.2 状态管理优化

// stores/editor.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useEditorStore = defineStore('editor', () => {
  const componentTree = ref<ComponentNode[]>([])
  const selectedId = ref<string>('')
  
  const selectedComponent = computed(() => 
    findComponentById(componentTree.value, selectedId.value)
  )

  function addComponent(component: ComponentNode) {
    componentTree.value.push(component)
  }

  return {
    componentTree,
    selectedId,
    selectedComponent,
    addComponent
  }
})

总结与建议

1. 工程化规范

   • 统一的代码风格配置（ESLint + Prettier）
   • Git提交规范（commitlint + husky）
   • 自动化测试与CI/CD流程

2. 性能优化要点

   • 组件按需加载
   • 合理的缓存策略
   • 微前端资源预加载
   • Tree-shaking优化

3. 开发建议

   • 遵循Vue 3组合式API最佳实践
   • 合理使用TypeScript提升代码质量
   • 注重组件设计的可复用性
   • 保持良好的文档习惯

参考资料

• Vue 3官方文档
• Pnpm Workspace指南
• 微前端解决方案wujie
• TailwindCSS文档