Svelte NodeGUI 项目教程

Svelte NodeGUI 项目教程

svelte-nodeguiBuild performant, native and cross-platform desktop applications with native Svelte + powerful CSS-like styling.🚀项目地址:https://gitcode.com/gh_mirrors/sv/svelte-nodegui

1. 项目的目录结构及介绍

Svelte NodeGUI 项目的目录结构如下：

svelte-nodegui/
├── src/
│   ├── main.js
│   ├── App.svelte
│   ├── components/
│   └── styles/
├── public/
│   └── index.html
├── package.json
├── rollup.config.js
└── README.md

目录结构介绍

• src/: 包含项目的源代码。
  • main.js: 项目的入口文件。
  • App.svelte: 主应用程序组件。
  • components/: 存放其他 Svelte 组件。
  • styles/: 存放样式文件。
• public/: 包含静态资源文件。
  • index.html: 主 HTML 文件。
• package.json: 项目的配置文件，包含依赖和脚本。
• rollup.config.js: Rollup 配置文件，用于打包项目。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

main.js

main.js 是 Svelte NodeGUI 项目的入口文件，负责初始化和启动应用程序。以下是 main.js 的基本结构：

import { app, Window } from '@nodegui/nodegui';
import App from './App.svelte';

const win = new Window();
const appComponent = new App({
  target: win.rootView,
});

win.show();
app.exec();

文件介绍

• 导入模块: 导入 @nodegui/nodegui 中的 app 和 Window 模块。
• 创建窗口: 创建一个新的 Window 实例。
• 初始化 Svelte 组件: 将 App.svelte 组件挂载到窗口的根视图上。
• 显示窗口: 调用 win.show() 显示窗口。
• 启动应用: 调用 app.exec() 启动应用程序的主事件循环。

3. 项目的配置文件介绍

package.json

package.json 是 Node.js 项目的配置文件，包含项目的基本信息、依赖和脚本。以下是 package.json 的基本结构：

{
  "name": "svelte-nodegui",
  "version": "1.0.0",
  "description": "Build performant native and cross-platform desktop apps with Svelte",
  "main": "src/main.js",
  "scripts": {
    "dev": "rollup -c -w",
    "build": "rollup -c",
    "start": "node dist/main.js"
  },
  "dependencies": {
    "@nodegui/nodegui": "^0.30.0",
    "svelte": "^3.38.2"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^13.0.0",
    "rollup": "^2.47.0",
    "rollup-plugin-svelte": "^7.1.0"
  }
}

文件介绍

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 项目入口文件。
• scripts: 定义可执行的脚本命令。
  • dev: 使用 Rollup 进行开发构建并监听文件变化。
  • build: 使用 Rollup 进行生产构建。
  • start: 启动构建后的应用程序。
• dependencies: 项目运行时的依赖。
• devDependencies: 开发时的依赖。

rollup.config.js

rollup.config.js 是 Rollup 的配置文件，用于打包项目。以下是 rollup.config.js 的基本结构：

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/main.

svelte-nodeguiBuild performant, native and cross-platform desktop applications with native Svelte + powerful CSS-like styling.🚀项目地址:https://gitcode.com/gh_mirrors/sv/svelte-nodegui