KVision 项目教程

KVision 项目教程

kvisionObject oriented web framework for Kotlin/JS项目地址:https://gitcode.com/gh_mirrors/kv/kvision

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

KVision 项目的目录结构如下：

kvision/
├── build.gradle.kts
├── settings.gradle.kts
├── gradle/
├── gradlew
├── gradlew.bat
├── src/
│   ├── main/
│   │   ├── kotlin/
│   │   │   └── com/
│   │   │       └── example/
│   │   │           └── kvision/
│   │   │               ├── App.kt
│   │   │               └── Main.kt
│   │   └── resources/
│   └── test/
│       └── kotlin/
│           └── com/
│               └── example/
│                   └── kvision/
│                       └── AppTest.kt
└── README.md

目录结构介绍

• build.gradle.kts 和 settings.gradle.kts: Gradle 构建脚本。
• gradle/: Gradle 包装器和相关文件。
• gradlew 和 gradlew.bat: Gradle 包装器脚本。
• src/: 源代码目录。
  • main/: 主代码目录。
    • kotlin/: Kotlin 源代码目录。
      • com/example/kvision/: 项目主要代码目录。
        • App.kt: 应用程序主类。
        • Main.kt: 主入口文件。
    • resources/: 资源文件目录。
  • test/: 测试代码目录。
    • kotlin/: Kotlin 测试代码目录。
      • com/example/kvision/: 测试代码目录。
        • AppTest.kt: 应用程序测试类。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

主入口文件

Main.kt 是 KVision 项目的主入口文件，其内容如下：

package com.example.kvision

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

fun main() {
    startApplication(::App, module.hot)
}

应用程序主类

App.kt 是 KVision 项目的应用程序主类，其内容如下：

package com.example.kvision

import io.kvision.Application
import io.kvision.core.Container
import io.kvision.html.h1
import io.kvision.panel.vPanel
import io.kvision.state.ObservableValue
import io.kvision.utils.onClick

class App : Application() {
    val state = ObservableValue("Hello world")

    override fun start() {
        root("root") {
            vPanel {
                h1(state) {
                    +it
                }
                button("Add an exclamation mark") {
                    onClick {
                        state.value += "!"
                    }
                }
            }
        }
    }
}

3. 项目的配置文件介绍

Gradle 构建脚本

build.gradle.kts 是 KVision 项目的 Gradle 构建脚本，其内容如下：

import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig

plugins {
    kotlin("multiplatform") version "1.5.31"
    id("io.kvision") version "4.2.1"
}

repositories {
    mavenCentral()
    mavenLocal()
}

kotlin {
    jvm()
    js {
        browser {
            commonWebpackConfig {
                cssSupport.enabled = true
            }
        }
        binaries.executable()
    }
    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation("io.kvision:kvision:4.2.1")
            }
        }
        val jvmMain by getting {
            dependencies {
                implementation("io.kvision:kvision-server-ktor:4.2.1")
            }
        }
        val jsMain by getting {
            dependencies {
                implementation("io.kvision:kvision-bootstrap:4.2.1")
            }
        }

kvisionObject oriented web framework for Kotlin/JS项目地址:https://gitcode.com/gh_mirrors/kv/kvision