KVision 示例项目教程

KVision 示例项目教程

kvision-examples KVision examples 项目地址: https://gitcode.com/gh_mirrors/kv/kvision-examples

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

kvision-examples/
├── build.gradle.kts
├── gradle
│   └── wrapper
│       ├── gradle-wrapper.jar
│       └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
├── settings.gradle.kts
└── src
    ├── main
    │   ├── kotlin
    │   │   └── com
    │   │       └── example
    │   │           └── kvision
    │   │               ├── App.kt
    │   │               └── Main.kt
    │   └── resources
    │       └── index.html
    └── test
        └── kotlin
            └── com
                └── example
                    └── kvision
                        └── AppSpec.kt

• build.gradle.kts: 项目的构建脚本，定义了项目的依赖和构建配置。
• gradle: 包含 Gradle Wrapper 的相关文件，用于确保项目使用一致的 Gradle 版本。
• gradlew & gradlew.bat: Gradle Wrapper 的启动脚本，分别用于 Unix 和 Windows 系统。
• settings.gradle.kts: 项目的设置文件，定义了项目的模块和依赖关系。
• src: 项目的源代码目录。
  • main/kotlin: 包含项目的 Kotlin 源代码。
    • App.kt: 项目的主应用程序文件。
    • Main.kt: 项目的入口文件。
  • main/resources: 包含项目的资源文件，如 HTML 文件。
  • test/kotlin: 包含项目的测试代码。

2. 项目的启动文件介绍

Main.kt

package com.example.kvision

import io.kvision.Application
import io.kvision.module
import io.kvision.startApplication

@Suppress("unused")
fun main() {
    startApplication(::App, module.hot)
}

• Main.kt: 这是项目的入口文件，定义了 main 函数，用于启动 KVision 应用程序。startApplication 函数用于初始化并启动应用程序，::App 指定了应用程序的主类。

App.kt

package com.example.kvision

import io.kvision.core.Container
import io.kvision.html.div
import io.kvision.panel.root
import io.kvision.startApplication

class App : Application() {
    override fun start() {
        root("kvapp") {
            div("Hello KVision!")
        }
    }
}

• App.kt: 这是应用程序的主类，继承自 Application。start 方法定义了应用程序的初始化逻辑，root 方法用于创建应用程序的根容器，div 方法用于创建一个简单的 HTML 元素。

3. 项目的配置文件介绍

build.gradle.kts

plugins {
    kotlin("js") version "1.5.31"
}

group = "com.example"
version = "1.0-SNAPSHOT"

repositories {
    mavenCentral()
}

dependencies {
    implementation(kotlin("stdlib-js"))
    implementation("io.kvision:kvision:4.6.0")
}

kotlin {
    js {
        browser {
            commonWebpackConfig {
                cssSupport.enabled = true
            }
        }
        binaries.executable()
    }
}

• build.gradle.kts: 这是项目的构建配置文件，使用 Kotlin DSL 编写。它定义了项目的依赖、插件和构建配置。
  • plugins: 定义了项目使用的插件，如 Kotlin/JS 插件。
  • repositories: 定义了项目的依赖仓库，如 Maven Central。
  • dependencies: 定义了项目的依赖，如 Kotlin 标准库和 KVision 库。
  • kotlin: 定义了 Kotlin/JS 的构建配置，如浏览器目标和 Webpack 配置。

settings.gradle.kts

rootProject.name = "kvision-examples"

• settings.gradle.kts: 这是项目的设置文件，定义了项目的根模块名称。

kvision-examples KVision examples 项目地址: https://gitcode.com/gh_mirrors/kv/kvision-examples