yutent b068f90f0e 增加router-link 2023-08-13 23:20:02 +08:00
src 增加router-link 2023-08-13 23:20:02 +08:00
.gitignore 一大波更新 2023-08-10 19:59:02 +08:00
.prettierrc.yaml init 2023-08-09 11:09:39 +08:00
LICENSE init 2023-08-09 11:09:39 +08:00
Readme.md 增加说明 2023-08-09 11:27:46 +08:00
package.json init 2023-08-09 11:09:39 +08:00

Readme.md

Wkitd

基于wkit封装的一个应用框架, 提供storerouter等基础服务。

downloads version

开发文档

开发文档

我们的特色

  • 提供迷你的单页应用开发环境
  • 无需node.js编译, 即写即用。

一些注意事项

  • 路由不支持嵌套, 即<router-view></router-view>只能出现1次。
  • $router$route对象, 只注入到一级路由页面, 页面引用的其他web components组件, 不会注入。
  • 所有路由页面和组件, 均可使用getCurrentPage()获取当前的$route对象; 同时可以使用getRouter()获取$router对象。
  • $store对象, 只注入到一级路由页面, 其他组件可使用getStore()获取。
  • $store对象为非响应式, 后续可能会支持(时间无限期延后)。

示例

app.js

// alias wkitd='//jscdn.ink/wkitd/latest/index.js'
import { css, html, createApp, createRouter, createWebHistory, createStore } from 'wkitd'


const store = createStore({
  foo: 123,
  bar: 456
})

import './views/home.js' // <wc-home />

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'wc-home' // element tagname !importent
    },
    {
      path: '/about',
      name: 'wc-about',
      component: () => import('./views/about.js')
    }
  ]
})


createApp({
  data:{},
  methods: {},
  render(){
    return html`
    <div class="app">
      <router-view></router-view>
    </div>`
  }
})
.use(store)
.use(router)
.mount()


index.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>wkitd example</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link href="" rel="stylesheet">
  <script type="importmap">
    {
      "imports":{
        "es.shim":"https://jscdn.ink/lib/es.shim.js",
        "wkit":"https://jscdn.ink/lib/wkit.js",
        "fetch":"https://jscdn.ink/lib/fetch.js",
        "@bd/ui/":"https://jscdn.ink/@bd/ui/latest/"
      }
    }
  </script>
  <script type="module" src="/app.js"></script>
</head>
<body>
  <wc-app></wc-app>
</body>
</html>
基于`wkit`封装的一个应用框架, 提供`store`和`router`等基础服务。
JavaScript 100%