「VTJ.PRO」AI驱动的Vue应用开发平台：快速入门

概述

VTJ.PRO 是一个面向前端开发者的 AI 驱动 Vue3 低代码开发平台。它提供了一套全面的可视化设计系统，能够与现有的 Vue 项目无缝集成，并支持视觉设计（DSL）与 Vue 源代码之间的双向转换。该平台基于 设计器-渲染器分离架构 构建，确保生成的代码保持整洁且无污染，同时支持完整的二次开发能力。

核心架构

该平台遵循模块化、可扩展的架构，围绕多个专用包进行组织。其核心理念强调 基于引擎的可扩展性、零侵入式集成 和 源码级定制——使开发者能够在不影响代码质量或开发工作流的前提下，充分利用可视化设计工具。

关键特性

VTJ.PRO 提供了一套全面的功能，旨在加速 Vue3 开发，同时保持代码质量和开发者的自由度。

特性类别	功能能力	收益
技术栈	Vue3 + TypeScript + Vite, ElementPlus, Axios, ECharts, VueUse, Monaco Editor	现代、生产就绪的技术栈，配备熟悉的工具
代码质量	设计器-渲染器分离、无污染输出、DSL/Vue 双向转换	干净、可维护的生成代码，支持二次开发
开发者体验	Vue 开发者零学习曲线、无缝本地项目集成、不打扰工作流	无需重新培训或更改工具链即可立即提升生产力
可扩展性	模块化引擎架构、可定制的小部件、setter 组件、面板扩展	构建自定义低代码平台或扩展现有平台
物料体系	多个企业级组件库（ElementPlus, Ant Design Vue, Vant）、可复用的块组件、页面模板	通过标准化、可复用的组件提高开发效率
AI 集成	自然语言生成组件、设计元数据解析（Figma, MasterGo）、AI Agent 进行页面操作	通过智能自动化加速开发
多平台	Web 应用（PC）、H5 移动应用、uni-app 跨平台支持	单一代码库面向多个部署环境
工作流	源码级定制、支持手动/自动模式的历史管理、多文件标签页工作区	专业级开发体验，完全掌控

设计器-渲染器分离架构是关键的创新点：可视化设计器创建 DSL 模式，并通过代码生成器将其转换为干净的 Vue 代码，而运行时渲染器在没有任何设计时依赖的情况下执行 DSL——确保生产应用程序保持轻量且易于维护。

项目结构

VTJ 仓库使用 pnpm workspaces 和 lerna 组织为一个 monorepo，能够在多个相关包之间实现高效的开发和版本管理。

vtj/
├── apps/                    
│   ├── app/                 # Web 应用示例
│   ├── h5/                  # 移动 H5 应用示例
│   ├── uniapp/              # uni-app 跨平台示例
│   └── material/            # 物料开发项目
├── packages/                 # 核心引擎和组件库
│   ├── core/                # 核心模型、协议和工具
│   ├── designer/            # 可视化编辑器框架
│   ├── renderer/            # 运行时执行引擎
│   ├── coder/               # 代码生成系统
│   ├── parser/              # Vue DSL 转换机制
│   ├── materials/           # 组件库包装器
│   ├── base/                # 基础工具库和共享函数
│   ├── utils/               # 辅助函数
│   ├── icons/               # 图标库
│   ├── ui/                  # UI 组件库
│   ├── charts/              # 图表组件库
│   ├── uni/                 # uni-app 特定组件
│   ├── cli/                 # 命令行工具
│   ├── node/                # Node.js 运行时支持
│   └── local/               # 本地存储工具
├── platforms/                # 特定平台的实现
│   ├── pro/                 # 全功能平台（PC）
│   ├── pro-uni/             # 支持 uni-app 的平台
│   ├── h5/                  # 移动 H5 平台
│   ├── web/                 # Web 平台
│   └── uni-app/             # uni-app 平台
├── create-vtj/               # 项目脚手架 CLI 工具
│   └── templates/            # 项目模板
├── dev/                      # 开发环境和演示
├── docs/                     # 文档站点
└── scripts/                  # 构建和工具脚本

核心包概览

基础包

@vtj/base 提供了所有包中使用的基础工具和共享函数，包括加密函数、使用 Day.js 的日期处理、Lodash 工具库、使用 JSEncrypt 的加密、使用 LZ-string 的字符串压缩、使用 Mitt 的事件处理以及正则表达式工具。

@vtj/utils 使用 Vue3 特定的辅助函数、响应式工具、组合式 API 扩展和支持低代码操作的通用算法扩展了基础功能。

引擎核心

@vtj/core 定义了驱动整个平台的基础模型、协议和工具。它包括项目、页面、块、组件及其关系的数据模型；设计器和渲染器之间通信的协议定义；事件系统；历史管理；以及 DSL 操作工具。

设计器与渲染器

@vtj/designer 实现了可视化设计界面，具有拖放式组件放置、属性配置面板、模板编辑器、带有 Monaco Editor 的代码预览、历史管理、多文件标签页工作区、AI 助手集成以及针对不同属性类型的各种 setter 组件。

@vtj/renderer 是运行时引擎，它执行 DSL 模式以在生产环境中渲染功能性的 Vue 组件，而无需任何设计时依赖。它支持动态组件加载、事件处理、数据绑定和生命周期管理。

代码转换

@vtj/parser 利用 Babel 的 AST 解析器、Vue 编译器工具和自定义转换逻辑，实现 Vue 源代码与 DSL 之间的双向转换。这是平台能够在可视化设计和代码编辑之间无缝切换的基础。

@vtj/coder 从 DSL 模式生成干净、生产就绪的 Vue 源代码，具有适当的格式化、导入和组件注册——确保输出与手写代码无异。

入门选项

VTJ 根据你的需求和偏好提供了多种入门方式：

选项	描述	最适合
在线平台	访问 app.vtj.pro 直接在浏览器中创建应用程序，即时进行设计和代码生成	快速原型设计、评估和小型项目
**本地开发	运行 npm create vtj@latest --registry=https://registry.npmmirror.com -- -t app 脚手架一个本地 Web 应用程序项目	生产 Web 应用程序，完整功能访问
移动 H5 开发	运行 npm create vtj@latest --registry=https://registry.npmmirror.com -- -t h5 开发移动优先的应用程序	移动 Web 应用程序，响应式设计
跨平台开发	运行 npm create vtj@latest --registry=https://registry.npmmirror.com -- -t uniapp 从单一代码库面向 Web、iOS、Android	多平台部署，移动应用
物料开发	运行 npm create vtj@latest --registry=https://registry.npmmirror.com -- -t material 创建自定义组件库	扩展物料系统，组件开发
源码开发	克隆仓库并运行 npm run setup && npm run build && npm run app:dev	为 VTJ 做贡献，深度定制

设计预览

可视化设计器提供了一个直观的拖放界面，让 Vue 开发者感到熟悉。关键界面元素包括：

设计器支持多种视图：可视化设计、源代码和 DSL 模式——允许开发者以最适合其当前任务的任何模式进行工作。

技术栈

VTJ 构建在现代、生产就绪的技术栈之上：

• 核心框架：Vue 3.5+ 配合 Composition API
• 语言：TypeScript 5.9+
• 构建工具：Vite
• 包管理：pnpm workspaces 配合 Lerna
• UI 库：ElementPlus, Ant Design Vue, Vant
• 代码编辑器：Monaco Editor
• 工具库：VueUse, Axios, ECharts, Lodash
• 代码生成：Babel AST 解析器, Vue 编译器
• 测试：Vitest
• 文档：Typedoc

该技术栈确保与现有的 Vue3 项目兼容，并可访问更广泛的 Vue 生态系统。

企业应用

VTJ.PRO 赢得了各类组织的信赖，以加速其数字化转型：

组织	用例
浪潮集团	企业管理系统
北京百度网讯	内部工具和仪表板
上药控股	医疗健康应用
中国铁塔	基础设施管理系统
海尔消费金融	金融服务平台

这些组织利用 VTJ 在缩短开发时间的同时保持代码质量，并实现快速迭代。

该平台的企业应用证明了其生产就绪性：大型组织需要健壮的代码生成、可靠的运行时性能以及超越视觉设计进行扩展的能力——而 VTJ 通过其整洁的架构和全面的功能集实现了这些能力。

快速开始

VTJ.PRO 是一个基于 Vue3 + TypeScript 构建的 AI 驱动低代码开发平台，可实现 Vue 源代码与低代码 DSL 之间的双向智能转换。本指南将帮助你快速上手 VTJ，在几分钟内创建你的第一个低代码应用。

VTJ 能提供什么

VTJ.PRO 提供了一套全面的低代码开发解决方案，具备以下关键优势：

• 零学习门槛：专为 Vue 开发者设计，保持熟悉的编码习惯和工作流
• 源码级定制：支持代码级别的自由度，实现传统编码能完成的任何功能
• 双向代码转换：在可视化设计与手写代码之间无缝切换
• 多平台支持：Web、H5 移动端和 uni-app 跨平台开发
• 丰富的物料库：内置企业级组件库和页面模板
• AI 驱动开发：通过自然语言、设计文件或网页截图生成组件

入门方式选择

VTJ 提供两种主要入门方式，根据你的需求选择：

方式	最适合	要求	特性
在线平台	快速探索和原型设计	仅需浏览器	无需安装，完整设计器功能，云存储
本地 CLI	生产环境开发	Node.js v20+	完全控制，自定义配置，离线开发

架构概览

前置要求

在开始使用 VTJ 之前，请确保已完成以下环境设置：

• Node.js：版本 20 或更高（推荐 LTS 版本）
• 包管理器：npm（随 Node.js 附带）或 pnpm 10.13+
• 命令行知识：基本熟悉终端操作
• 现代浏览器：Chrome、Edge 或 Firefox 用于设计器界面

方式 1：在线平台体验

如需立即探索而无需安装，请访问在线平台：

访问地址：app.vtj.pro

在线平台提供完整的低代码设计器访问权限，允许你：

• 创建和管理应用程序
• 使用拖放组件设计页面
• 导出生成的 Vue 代码
• 测试 AI 驱动的组件生成

方式 2：创建本地项目

如需进行完全控制和定制的生产环境开发，请使用 VTJ CLI 工具。

创建你的第一个项目

执行以下命令创建新的 VTJ 项目。根据你的目标平台选择合适的模板：

npm create vtj@latest --registry=https://registry.npmmirror.com -- -t app # For H5 mobile applicationsnpm create vtj@latest --registry=https://registry.npmmirror.com -- -t h5 # For uni-app cross-platform applicationsnpm create vtj@latest --registry=https://registry.npmmirror.com -- -t uniapp

--registry=https://registry.npmmirror.com 标志使用淘宝 npm 镜像以加速中国大陆地区的下载。如果你在其他地区，请移除此参数。

可用项目模板

模板名称	命令标志	平台	使用场景
Web 应用	app	桌面端	标准网络应用、管理面板、仪表盘
H5 应用	h5	移动端	移动端网络应用、响应式站点
uni-app	uniapp	跨平台	支持 iOS、Android 和 Web 的移动应用
物料	material	库	开发自定义组件库
扩展	extension	插件	使用自定义组件扩展设计器
插件	plugin	区块	创建可复用的区块组件
库	library	工具	构建共享工具库

项目初始化流程

CLI 将引导你完成交互式设置：

运行你的项目

项目创建完成后，按照以下步骤启动开发环境：

# Navigate to your project directory
cd your-project-name
 
# Install dependencies (first-time setup may take 1-3 minutes)
npm run setup
 
# Start the development server
npm run dev

成功启动后，你将看到类似以下的输出：

  VITE v5.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.x.x:5173/

在浏览器中打开本地地址即可查看运行中的应用。

设计器访问：低代码设计器通常可通过 http://localhost:5173/__vtj__/ 访问

理解你的项目结构

典型的 VTJ 项目遵循标准的 Vue3 应用结构：

vtj-project/
├── public/              # 静态资源（favicon、logo）
├── src/
│   ├── App.vue         # 根组件
│   ├── main.ts         # 应用入口
│   ├── assets/         # 图片、样式、图标
│   ├── components/     # 自定义 Vue 组件
│   ├── router/         # Vue Router 配置
│   ├── style/          # 全局样式
│   └── views/          # 页面级组件
├── env.json           # 环境配置
├── package.json       # 依赖和脚本
├── vite.config.ts     # Vite 构建配置
└── tsconfig.json      # TypeScript 配置

关键配置文件：

• env.json：环境变量和平台设置
• vite.config.ts：构建工具配置
• tsconfig.json：TypeScript 编译器选项

VTJ 项目内部采用 monorepo 结构。@vtj/* 包通过 workspace 引用链接，确保所有 VTJ 依赖项版本一致。

项目脚本和操作

生成的项目包含多个实用脚本：

命令	描述	使用场景
npm run setup	使用镜像安装依赖	初始设置或依赖更新
npm run dev	启动开发服务器	本地开发
npm run build:prod	生产构建	部署到生产环境
npm run build:dev	开发构建	测试生产环境构建
npm run preview	预览生产构建	本地测试生产构建

快速开始工作流

以下是创建第一个 VTJ 应用的完整工作流：

常见问题排查

依赖安装失败

问题：npm run setup 失败或卡住

解决方案：

# Clear cache and retry
rm -rf node_modules package-lock.json
npm run setup
 
# Or try pnpm instead
npm install -g pnpm
pnpm install

原因：网络问题或缓存损坏

端口已被占用

问题：错误"Port 5173 is already in use"

解决方案：修改 vite.config.ts：

Copy code

export default defineConfig({
  server: {
    port: 3000  // Change to available port
  }
})

设计器无法加载

问题：设计器页面显示空白或错误

解决方案：

• 确保使用 Chrome、Edge 或 Firefox
• 清除浏览器缓存（Ctrl+Shift+Delete）
• 检查浏览器控制台的具体错误信息
• 验证 Node.js 版本为 20+

项目设置与安装

本指南涵盖了 VTJ.PRO 的完整设置和安装流程，为你提供了开始使用这个 AI 驱动的 Vue3 低代码开发平台所需的一切。无论你是创建新应用程序还是为项目做贡献，本文档都将引导你完成必要的步骤。

前置条件

在安装 VTJ.PRO 之前，请确保你的开发环境满足以下要求：

系统要求

VTJ.PRO 基于现代 Web 技术构建，需要特定版本的开发工具才能正常运行。

要求	版本	用途
Node.js	v20+	开发和构建的运行时环境
pnpm	~10.13.0	Monorepo 工作区的包管理器
lerna	~8.2.0	多包管理工具

设置 Node 版本

如果你尚未安装 Node.js v20 或更高版本，强烈建议使用 nvm（Node Version Manager）来轻松管理多个 Node 版本：

Copy code

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
 
# 安装并使用 Node.js v20
nvm install 20
nvm use 20

安装全局工具

为了进行开发设置和源码贡献，你需要全局安装 lerna 和 pnpm：

npm install -g lerna@latest pnpm@latest --registry=https://registry.npmmirror.com

安装方法概览

VTJ.PRO 提供两种主要的安装方式，分别适用于不同的需求：

方法 1：CLI 设置（推荐）

基于 CLI 的设置是开始使用 VTJ.PRO 构建应用程序的最快方式。它提供交互式体验，通过预配置的模板引导你完成项目创建。

可用的项目模板

VTJ.PRO 支持针对不同开发场景定制的多种项目类型：

模板	描述	用例	技术栈
app	Web 应用程序 (PC)	桌面 Web 应用	@vtj/web, Vue Router, Pinia
h5	H5 移动端应用	移动优先的 Web 应用	@vtj/h5, Vue Router, Pinia
uniapp	跨平台应用	多平台部署	@vtj/uni-app, uni-app framework
material	组件库	自定义组件开发	Element Plus, VTJ Core
extension	设计器扩展	设计器自定义	@vtj/core, VueUse
plugin	区块插件	可复用的区块组件	VTJ Material System
library	通用库	工具/共享库	TypeScript, Vitest

交互式项目创建

若要通过交互式设置体验进行模板选择和项目配置：

npm create vtj@latest --registry=https://registry.npmmirror.com

该命令将启动一个交互式 CLI，引导你完成以下步骤：

1. 模板选择：从可用的项目类型中选择
2. 项目名称：定义你的包名
3. 目录处理：如果目录存在，确认是否覆盖

命令行项目创建

为了加快设置速度或实现 CI/CD 自动化，你可以直接指定模板：

# Web 应用程序 (PC)
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t app
 
# H5 移动端应用
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t h5
 
# 跨平台应用
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t uniapp
 
# 物料开发项目
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t material

创建后设置

项目创建完成后，请按照以下步骤初始化你的开发环境：

cd vtj-project  # 或你指定的项目名称
npm install
npm run dev

CLI 会在项目创建后自动显示这些命令，并根据你使用的包管理器（npm、yarn 或 pnpm）进行定制。

项目结构概览

每个生成的项目都遵循针对所选模板优化的标准结构：

Copy code

vtj-project/
├── src/
│   ├── App.vue           # 根组件
│   ├── main.ts           # 应用入口
│   ├── router/           # 路由配置
│   ├── views/            # 页面组件
│   ├── components/       # 可复用组件
│   └── assets/           # 静态资源
├── public/               # 公共资源
├── package.json          # 依赖和脚本
├── vite.config.ts        # Vite 配置
├── tsconfig.json         # TypeScript 配置
├── env.json              # 环境变量 (本地)
├── env.sit.json          # 环境变量 (SIT)
├── env.uat.json          # 环境变量 (UAT)
└── proxy.config.ts       # 开发代理设置

方法 2：源码开发

如果你计划为 VTJ.PRO 做贡献或需要深度定制，你需要直接使用源码进行工作。这种方式可以让你完全访问所有包，并允许你修改核心功能。

Monorepo 架构

VTJ.PRO 使用由 pnpm workspaces 和 lerna 管理的 monorepo 结构。这种架构能够在保持一致性的同时，高效地在多个包之间进行开发。

设置开发环境

请按照以下步骤设置完整的开发环境：

# 克隆仓库
git clone https://gitee.com/newgateway/vtj.git
cd vtj
 
# 安装所有依赖
npm run setup
 
# 构建所有包
npm run build
 
# 启动开发应用程序
npm run app:dev

开发脚本

根目录的 package.json 提供了用于开发工作流程的全面脚本：

命令	用途	描述
npm run setup	安装依赖	安装所有工作区包
npm run dev	启动开发服务器	启动开发 Web 应用程序
npm run dev:uni	启动 Uni 开发	启动 uni-app 开发服务器
npm run build	构建所有包	编译所有包用于生产环境
npm run clean	清理项目	删除 node_modules 和构建产物
npm run reset	重置项目	清理并重新安装所有内容

特定包脚本

针对特定包的开发，请使用目标脚本：

# Core 包开发
npm run core:dev    # 监听模式并支持热重载
npm run core:test   # 运行测试
npm run core:build  # 构建包
 
# Designer 包开发
npm run designer:dev
npm run designer:test
npm run designer:build
 
# Renderer 包开发
npm run renderer:dev
npm run renderer:test
npm run renderer:build

配置与环境

Registry 配置

VTJ.PRO 使用中国 npm 镜像源以加速国内的下载。这在设置脚本中进行了配置：

{
  "scripts": {
    "setup": "pnpm install --unsafe-perm --registry=https://registry.npmmirror.com"
  }
}

环境变量

由 VTJ.PRO 生成的项目支持多环境配置：

环境文件	用途	默认环境
env.json	本地开发	local
env.sit.json	系统集成测试	sit
env.uat.json	用户验收测试	uat

构建脚本使用 ENV_TYPE 环境变量来选择适当的配置：

# 为不同环境构建
npm run build:sit    # 系统集成测试
npm run build:uat    # 用户验收测试
npm run build:pre    # 预发布
npm run build:prod   # 生产环境

特定平台的设置

Web 应用程序 (app)

对于桌面 Web 应用程序，模板包括：

• 依赖：@vtj/web, Vue Router, Pinia, Vue I18n
• 开发依赖：@vtj/cli, @vtj/pro
• 特性：多环境构建，TypeScript 支持，热模块替换 (HMR)

{
  "dependencies": {
    "@vtj/web": "latest",
    "vue": "~3.5.0",
    "vue-router": "~4.6.0",
    "pinia": "~3.0.2",
    "vue-i18n": "~11.2.2"
  }
}

H5 移动端应用 (h5)

针对移动端优化的模板，包含额外的移动端特定功能：

• 依赖：@vtj/renderer, @vtj/h5, Vue Router, Pinia
• 平台配置：H5 平台，无遮罩模式
• 特性：触摸优化，移动端视口处理

{
  "vtj": {
    "platform": "h5",
    "noMask": true
  }
}

uni-app 跨平台

针对面向多个平台（Web、iOS、Android、小程序）的应用程序：

• 依赖：@vtj/uni-app, uni-app framework packages
• 平台配置：uniapp 平台，无遮罩
• 构建目标：H5、App (iOS/Android)、微信小程序等

# uni-app 开发命令
npm run dev:h5           # H5 开发
npm run dev:mp-weixin    # 微信小程序
npm run dev:app          # App 开发
npm run build:h5         # H5 构建
npm run build:mp-weixin  # 微信小程序构建

物料开发

用于创建自定义组件库：

• 依赖：Element Plus, VTJ packages
• 构建配置：库和物料构建
• 输出格式：UMD, ESM，附带 TypeScript 类型定义

Copy code

{
  "main": "dist/index.umd.js",
  "module": "dist/index.mjs",
  "types": "types/index.d.ts",
  "exports": {
    ".": {
      "types": "./types/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.umd.js"
    }
  }
}

故障排查

常见问题

如果在安装过程中遇到权限问题，请按照设置脚本中所示使用 --unsafe-perm 标志。这允许包脚本在不受严格权限强制的情况下运行。

问题	解决方案	相关文件
Node 版本不匹配	确保已安装 Node.js v20+	dev/package.json
依赖冲突	运行 npm run clean，然后运行 npm run setup	package.json
构建失败	确保 TypeScript 已正确配置	tsconfig.json
Registry 错误	验证 npm registry 配置	package.json

清理环境

如果你需要重置开发环境：

# 清理所有 node_modules 和构建产物
npm run clean
 
# 重置并重新安装所有内容
npm run reset

验证安装

安装完成后，验证你的设置是否正确：

# 检查已安装的包
npm list --depth=0
 
# 运行类型检查
npm run type-check
 
# 运行测试（如果可用）
npm test

创建你的第一个应用

本指南将引导你从零开始创建你的第一个 VTJ 应用程序。VTJ 提供了多种针对不同平台和用例的项目模板，使你能够快速搭建一个与现有工作流无缝集成的低代码开发环境。

项目模板概览

VTJ 提供了七种不同的项目模板，以适应各种开发场景。每个模板都针对其特定用途预配置了最佳的技术栈和开发设置。

模板名称	显示名称	用例	平台	目标受众
app	Web应用	桌面 Web 应用程序	Web/PC	构建后台管理面板、管理系统的开发者
h5	H5应用	移动端 Web 应用程序	Mobile Web	创建移动端优化 Web 应用的开发者
uniapp	移动端应用	跨平台移动应用	iOS/Android/Web/小程序	同时针对多个移动平台的开发者
material	物料开发项目	自定义组件库开发	Library/Component	构建可复用低代码组件的开发者
plugin	低代码区块插件	低代码区块/插件开发	Plugin	创建可复用页面区块的开发者
extension	设计器扩展开发项目	设计器定制项目	Extension	扩展设计器功能的开发者
library	通用类库	通用工具库开发	Library	构建共享工具包的开发者

项目创建流程

项目创建流程遵循一个简化的过程，引导你从选择模板到拥有一个完全可运行的开发环境。

快速开始命令

使用 npm create 模式并选择模板来创建你的项目。-t 标志允许你直接指定模板，而无需交互式提示。

Web 应用程序（推荐给初学者）

npm create vtj@latest --registry=https://registry.npmmirror.com -- -t app

这将创建一个桌面 Web 应用程序，包含 ElementPlus UI 组件、用于导航的 Vue Router 以及用于状态管理的 Pinia。

移动端 H5 应用程序

npm create vtj@latest --registry=https://registry.npmmirror.com -- -t h5

针对移动设备进行了优化，具有触控友好的组件和响应式布局配置。

跨平台应用程序 (uni-app)

npm create vtj@latest --registry=https://registry.npmmirror.com -- -t uniapp

能够从单一代码库部署到 iOS、Android、Web 和各种小程序平台。

物料开发项目

npm create vtj@latest --registry=https://registry.npmmirror.com -- -t material

为开发可集成到 VTJ 设计器的自定义组件提供脚手架。

交互式项目创建

为了获得更具引导性的体验，请在运行命令时不带 -t 标志，以交互方式选择你的模板并配置项目选项。

npm create vtj@latest --registry=https://registry.npmmirror.com

系统将提示你：

1. 从可用选项中选择一个项目模板
2. 输入你的包名（根据 npm 命名规范进行验证）
3. 如果目标目录已存在，确认是否覆盖

CLI 会根据正则表达式模式 ^(?:@[a-z\d-*~][a-z\d-*._~]*/)?[a-z\d-~][a-z\d-._~]*$ 验证包名，并自动格式化目标目录名称。

开源项目仓库

gitee.com/newgateway/…