yutent
80a58ac116
|
||
|---|---|---|
| src | ||
| .gitignore | ||
| .prettierrc.yaml | ||
| LICENSE | ||
| Readme.md | ||
| package.json | ||
Readme.md
Wkitd
基于
wkit封装的一个应用框架, 提供store和router等基础服务。
开发文档
我们的特色
- 提供迷你的单页应用开发环境
- 无需
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>
JavaScript
100%