VTJ.PRO：一个不绑架代码的低代码引擎，长什么样？

预计阅读时间：11 分钟

低代码赛道火了这么多年，开发者对它的态度却始终矛盾——拖拽出页面的速度确实快，但一旦项目做大，你就会发现自己被锁在了平台上：生成的代码没法读、没法改、没法脱离平台独立运行。想二次开发？要么回到平台里继续拖，要么干脆重写。

VTJ.PRO 的出发点很简单：低代码的效率不该以牺牲代码控制权为代价。

低代码的"暗坑"到底在哪？

大多数低代码产品的架构逻辑是这样的：可视化编辑器 → 内部私有数据模型 → 渲染引擎实时解析。用户拖拽操作的最终产物是一份平台专有的 JSON 描述，而不是标准的前端代码。这带来三个连锁问题：

代码不可读：导出的"源码"本质是平台私有 schema 的序列化结果，人类无法直接理解和修改。
项目不可独立：脱离平台 runtime，页面就跑不起来。你不是在写项目，你是在租用平台的一个实例。
二次开发不可行：想加一段自定义逻辑？要么用平台提供的有限扩展点，要么放弃低代码回到手写。两条路之间没有平滑过渡。

这些问题在小项目阶段不明显，一旦进入正式产品迭代，就会变成硬约束。

VTJ.PRO 的思路：生成的是代码，不是私有 schema

VTJ.PRO 的核心设计选择是——编辑器的产出物是标准前端源码，而非平台私有数据格式。这意味着：

你拖拽完成的页面，最终得到的是可读的 Vue 组件代码（基于 Vue 3 + TypeScript）。
生成的代码不依赖 VTJ.PRO 的 runtime，可以像普通项目一样 npm run dev、npm run build。
你可以随时从低代码模式切换到纯代码模式，在生成的代码基础上继续手写开发。

换句话说，VTJ.PRO 把自己定位成一个代码生成工具，而不是一个代码托管平台。生成完了，它就可以退场。

实际上手：从安装到生成一个可独立运行的页面

下面用一个最小示例演示 VTJ.PRO 的使用流程。假设你要快速搭建一个包含表格和搜索表单的管理页面。

1. 初始化项目

# 创建项目（VTJ.PRO 基于 Vite + Vue 3 + TypeScript）
npm create vtj@latest my-admin-app

cd my-admin-app
npm install

2. 启动可视化编辑器

npm run vtj

这会打开 VTJ.PRO 的页面设计器。你在里面拖拽组件、配置属性、绑定数据源，操作体验和其他低代码平台类似——但关键区别在下一步。

3. 导出代码并独立运行

在编辑器中完成页面设计后，执行代码生成：

npm run vtj:generate

这个命令会把编辑器中的页面设计转化为标准 Vue SFC 文件，输出到项目的 src/pages/ 目录下。生成的代码长这样：

<!-- src/pages/UserManagement.vue -->
<template>
  <div class="user-management">
    <div class="search-form">
      <ElForm :model="searchForm" inline>
        <ElFormItem label="姓名">
          <ElInput v-model="searchForm.name" placeholder="请输入姓名" clearable />
        </ElFormItem>
        <ElFormItem label="状态">
          <ElSelect v-model="searchForm.status" placeholder="请选择状态" clearable>
            <ElOption label="启用" value="active" />
            <ElOption label="禁用" value="disabled" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem>
          <ElButton type="primary" @click="handleSearch">查询</ElButton>
          <ElButton @click="resetSearch">重置</ElButton>
        </ElFormItem>
      </ElForm>
    </div>

    <ElTable :data="tableData" border stripe>
      <ElTableColumn prop="id" label="ID" width="80" />
      <ElTableColumn prop="name" label="姓名" />
      <ElTableColumn prop="email" label="邮箱" />
      <ElTableColumn prop="status" label="状态">
        <template #default="{ row }">
          <ElTag :type="row.status === 'active' ? 'success' : 'danger'">
            {{ row.status === 'active' ? '启用' : '禁用' }}
          </ElTag>
        </template>
      </ElTableColumn>
      <ElTableColumn label="操作" width="160">
        <template #default="{ row }">
          <ElButton size="small" @click="handleEdit(row)">编辑</ElButton>
          <ElButton size="small" type="danger" @click="handleDelete(row)">删除</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { UserItem } from '../types'

const searchForm = reactive({
  name: '',
  status: ''
})

const tableData = ref<UserItem[]>([])

async function handleSearch() {
  // 调用实际接口替换此处模拟数据
  tableData.value = [
    { id: 1, name: '张三', email: 'zhang@example.com', status: 'active' },
    { id: 2, name: '李四', email: 'li@example.com', status: 'disabled' }
  ]
}

function resetSearch() {
  searchForm.name = ''
  searchForm.status = ''
  tableData.value = []
}

function handleEdit(row: UserItem) {
  console.log('编辑用户:', row)
}

function handleDelete(row: UserItem) {
  console.log('删除用户:', row)
}

// 初始加载
handleSearch()
</script>

<style scoped>
.user-management {
  padding: 20px;
}
.search-form {
  margin-bottom: 16px;
}
</style>

注意几个关键点：

这是标准 Vue 3 SFC，没有任何 VTJ.PRO 特有的指令或包装函数。
依赖的是 Element Plus 组件库，不是 VTJ.PRO 的私有组件。
handleSearch 里的接口调用位置已经留好，你直接改成真实 API 请求就行。

4. 脱离编辑器，纯代码模式运行

# 正常的 Vite 开发服务器，和任何 Vue 项目一样
npm run dev

# 标准构建产物，可部署到任何静态服务器
npm run build

从这一步开始，VTJ.PRO 的编辑器已经不参与任何环节了。你完全可以把它当成一个普通 Vue 项目继续开发——加路由、加状态管理、写自定义组件，没有任何限制。

AI 辅助设计：从描述到页面

VTJ.PRO 还集成了 AI 能力，你可以用自然语言描述页面需求，让 AI 生成初始设计，再在编辑器中微调。典型用法：

在编辑器的 AI 输入框中输入：

"创建一个订单列表页面，顶部有日期范围筛选和订单状态下拉框，
表格显示订单号、客户名、金额、状态、创建时间，
状态列用不同颜色标签区分（待支付-警告、已支付-成功、已取消-危险），
每行有查看详情和取消订单两个操作按钮"

AI 会生成对应的页面布局和组件配置，你可以在编辑器中调整细节后导出代码。这个流程的价值在于：AI 生成的是可读代码的中间表示，而不是不可修改的黑盒产物。

什么时候该用，什么时候不该用

VTJ.PRO 适合的场景：

中后台管理页面：表单、表格、详情页这类结构化页面，低代码的效率优势最明显。
快速原型验证：先用拖拽出 MVP，再切换到代码模式做精细化开发。
团队协作中的非核心页面：让低代码承担"体力活"，核心业务逻辑留给纯代码。

不太适合的场景：

高度定制化的交互体验：动画、手势、复杂拖拽等场景，低代码编辑器的组件抽象层反而会成为障碍。
性能极限场景：大规模数据渲染、实时可视化等，需要手写优化逻辑。

选择低代码工具时该问的三个问题

不管你最终选不选 VTJ.PRO，评估任何低代码引擎时都可以用这个 checklist：

检查项	判断方法
导出的代码能否脱离平台独立运行？	生成代码后删掉平台依赖包，看项目能否正常 `npm run build`
生成的代码人类能否直接阅读和修改？	把导出文件丢给一个没接触过该平台的开发者，看他能否在 10 分钟内理解结构并做小改动
能否从低代码模式平滑切换到纯代码模式？	在生成的代码上手动加一个复杂组件和一段业务逻辑，看是否需要回编辑器操作

三个答案都是"能"，才值得认真考虑。否则你换来的效率，最终会在项目后期连本带利还回去。