Dw做html网站,专业招牌制作价格,网站建设商业,成功案例 品牌网站文章目录 Saucer 页面嵌入使用举例saucer-dev/cli 包安装执行生成修改package.json执行命令 参考资料 Saucer 页面嵌入使用举例
以一个Vue3项目为例#xff0c;把写好的页面转化为适配saucer框架的cpp代码#xff0c;供C项目调用。
saucer-dev/cli 包安装
安装saucer-dev/… 文章目录 Saucer 页面嵌入使用举例saucer-dev/cli 包安装执行生成修改package.json执行命令 参考资料 Saucer 页面嵌入使用举例
以一个Vue3项目为例把写好的页面转化为适配saucer框架的cpp代码供C项目调用。
saucer-dev/cli 包安装
安装saucer-dev/cli包
pnpm install saucer-dev/cli或
npm install saucer-dev/cli -D --save对于TypeScript项目则还要安装saucer-dev/types包。
由于我这个例子是Vue3的TypeScript项目且我想把该包放在开发模式中并写入到package.json中故
npm i -D saucer-dev/types -S执行生成
修改package.json
在package.json中增加一个专属于saucer embed的命令——build-saucer scripts: {dev: vite,build: run-p type-check \build-only {}\ --,build-saucer: saucer embed ./dist,preview: vite preview,build-only: vite build,type-check: vue-tsc --build,lint: eslint . --fix}我们的Vue3项目生成的发布文件在dist目录故设置为./dist。
当然这里也可按照官方文档直接修改build命令或采用全局模式为了环境隔离和使用方便这里我采用了独立命令的方式。
执行命令
在终端输入npm run build-saucer成功生成相关文件 生成了一堆供saucer项目调用的头文件如需要被调用的all.hpp
#pragma once#include string
#include unordered_map#include saucer/webview.hpp#include assets/index-BmKUOS99.js.hpp
#include assets/index-DoQOFAyg.css.hpp
#include favicon.ico.hpp
#include index.html.hppnamespace saucer::embedded
{inline auto all(){std::unordered_mapstd::string, embedded_file rtn;rtn.emplace(assets/index-BmKUOS99.js, embedded_file{saucer::stash::view(fhki3Onodun733QweSkUmPOL5hKDk0Jm1AqbHqEO8PwSND7gSjDttklr4NKGNC8ZOd5rwiR9ZA4D9qJn1zePt2LQhkcmqqux30aZcME5M4SUmdR8gb9tHpT), application/javascript});rtn.emplace(assets/index-DoQOFAyg.css, embedded_file{saucer::stash::view(f2ueru2Ph6oUn6cBGB4hz5sqV5WtUjxJeGqnBxffPel7N9qBjKcjOoD7b84Jfbm7O9hQEkRU7VBZOKe1iSEYstFgUGeW9iEV9oQR14NmA7wWIc55krt99P6Yt), text/css});rtn.emplace(favicon.ico, embedded_file{saucer::stash::view(f6NJUXUjfjH0o1Nwiy8ylpWyqYKLO7zXnevrg8CrDqJN97IGSXyz7MMsxEoSSqf4To8hOYjJ70UyhGiUmLZAii7FTItTyfJ9qfmDWh), image/vnd.microsoft.icon});rtn.emplace(index.html, embedded_file{saucer::stash::view(f1XjtLfpkQwqzWIsQOFjiWL44ycpgAeZnK5IKNIc4nxuSqcoUAAPSQFEHFhDfrRNqkX6dMwROShLTqyBKQXDjhcZIpKiz93M1eZAa), text/html});return rtn;}
} // namespace saucer::embedded
参考资料
Saucer EmbeddingDeepSeek辅助写一个Vue3页面C Saucer 编写Windows桌面应用
