Vue - 508364/NetLeaf GitHub Wiki
Vue 模块提供 Vue.js 后端支持和 HTML 生成功能，可用于快速创建基于 Vue.js 的响应式页面。
- Vue CDN 配置: 支持 unpkg、cdnjs、jsdelivr 和本地 Vue 文件
- Vue 代码检测: 自动检测 HTML 中的 Vue 代码模式
- 自动导入: 当检测到 Vue 代码时自动添加 Vue CDN 导入
- HTML 页面生成: 生成带有 Vue 集成的完整 HTML 页面
- 预制系统信息页面: 展示系统信息、性能监控和模块列表
- 变量替换: 支持模板变量替换
- ✅ Windows
- ✅ Linux
- ✅ macOS
Vue 模块支持使用本地 Vue.js 文件，无需依赖 CDN 即可离线工作。
// 设置本地 Vue.js 文件路径
void nl_vue_set_local_path(const char* path);
// 从文件加载 Vue.js 内容到内存
int nl_vue_load_from_file(const char* filepath);
// 检查是否已加载本地 Vue.js
int nl_vue_has_local_content(void);
// 获取本地 Vue.js 内容
const char* nl_vue_get_local_content(void);
// 获取本地 Vue.js 文件路径
const char* nl_vue_get_local_path(void);
// 清除本地 Vue.js 内容
void nl_vue_clear_local_content(void);#include <stdio.h>
#include <stdlib.h>
#include "netleaf_vue.h"
int main() {
nl_vue_init();
// 方式1: 直接从文件加载
if (nl_vue_load_from_file("./vue.global.js") == 0) {
printf("Vue.js 已加载，大小: %zu bytes\n",
strlen(nl_vue_get_local_content()));
}
// 生成带内嵌 Vue.js 的页面
char* page = nl_vue_generate_page_inline("<div>{{ message }}</div>",
"离线页面", "./vue.global.js");
if (page) {
printf("%s\n", page);
free(page);
}
// 生成系统信息页面（内嵌Vue）
char* sysinfo = nl_vue_generate_sysinfo_inline("系统信息", "./vue.global.js");
if (sysinfo) {
printf("%s\n", sysinfo);
free(sysinfo);
}
nl_vue_shutdown();
return 0;
}Vue 模块提供了一个预制页面，展示 NetLeaf 的所有内容和功能：
展示 NetLeaf 完整信息的动态 Vue 页面：
- 系统信息：平台、架构、CPU核心数、内存
- 性能监控：CPU使用率、内存使用率、运行时间（实时更新）
- 模块列表：所有 NetLeaf 模块及版本信息
- 功能支持：各功能的支持状态和平台兼容性
// 生成系统信息页面（CDN模式）
char* page = nl_vue_generate_sysinfo("NetLeaf 系统信息");
// 生成系统信息页面（离线模式，使用本地Vue.js）
char* page = nl_vue_generate_sysinfo_inline("NetLeaf 系统信息", "./vue.global.js");页面特性：
- Vue 3 响应式动态更新
- 实时性能数据（每秒更新）
- 美观的卡片式布局
- 颜色编码的进度条
- 完整的模块和功能表格
// 初始化 Vue 模块
int nl_vue_init(void);
// 关闭 Vue 模块
void nl_vue_shutdown(void);
// 检查 Vue 模块是否可用
int nl_vue_is_available(void);
// 获取 Vue 模块版本
const char* nl_vue_version(void);// 设置默认 Vue 版本
void nl_vue_set_default_version(const char* version);
// 获取默认 Vue 版本
const char* nl_vue_get_default_version(void);
// 设置默认 CDN 类型
void nl_vue_set_default_cdn(nl_vue_cdn_type_t cdn_type);
// 获取默认 CDN 类型
nl_vue_cdn_type_t nl_vue_get_default_cdn(void);| 类型 | 描述 |
|---|---|
NL_VUE_CDN_UNPKG |
unpkg CDN (默认) |
NL_VUE_CDN_CDNJS |
cdnjs CDN |
NL_VUE_CDN_JSDELIVR |
jsdelivr CDN |
NL_VUE_CDN_LOCAL |
本地文件 |
// 生成完整 HTML 页面
char* nl_vue_generate_page(const char* vue_code, const char* title,
nl_vue_cdn_type_t cdn_type, const char* version);
// 生成带变量的 HTML 页面
char* nl_vue_generate_page_with_vars(const char* vue_code, const char* title,
const char** vars, const char** values, int count,
nl_vue_cdn_type_t cdn_type, const char* version);// 生成完整 HTML 页面
char* nl_vue_generate_page(const char* vue_code, const char* title,
nl_vue_cdn_type_t cdn_type, const char* version);
// 生成带变量的 HTML 页面
char* nl_vue_generate_page_with_vars(const char* vue_code, const char* title,
const char** vars, const char** values, int count,
nl_vue_cdn_type_t cdn_type, const char* version);// 生成系统信息页面（CDN模式）
char* nl_vue_generate_sysinfo(const char* title);
// 生成系统信息页面（离线模式，使用本地Vue.js）
char* nl_vue_generate_sysinfo_inline(const char* title, const char* vue_filepath);#include <stdio.h>
#include <stdlib.h>
#include "netleaf_vue.h"
int main() {
// 初始化模块
nl_vue_init();
// 设置默认配置（可选）
nl_vue_set_default_version("3.4.0");
nl_vue_set_default_cdn(NL_VUE_CDN_UNPKG);
// 生成系统信息页面
char* sysinfo = nl_vue_generate_sysinfo("NetLeaf 系统信息");
if (sysinfo) {
printf("%s\n", sysinfo);
free(sysinfo);
}
// 生成内嵌Vue.js的系统信息页面（离线模式）
char* sysinfo_inline = nl_vue_generate_sysinfo_inline("NetLeaf 系统信息", "./vue.global.js");
if (sysinfo_inline) {
printf("%s\n", sysinfo_inline);
free(sysinfo_inline);
}
// 清理
nl_vue_shutdown();
return 0;
}# 默认启用
BUILD_VUE=ON
# 禁用
BUILD_VUE=OFFsrc/vue/
├── CMakeLists.txt # CMake 配置
└── netleaf_vue.c # Vue 模块实现
include/
└── netleaf_vue.h # 头文件
Vue 模块不依赖其他模块，可独立使用。