kbone的使用
Kbone的作用
Kbone 是一个致力于微信小程序和 Web 端同构的解决方案,Kbone 可以快速实现 Web 项目转化为微信小程序项目。
Kbone快速上手
1)安装kbone-cli
npm install -g kbone-cli
2)创建项目
kbone init my-app
注意:项目名称不能包含大写字母,以下为错误提示以及目前支持的技术栈。
3)项目创建成功后,打开README.md文件,信息内容如下:
vue-kbone
使用 vue 多端开发(小程序和Web),基于 kbone 的 element 和 render。
特性
- 一键接入,立即使用
- 支持更完整的 vue 语法及特性
- webpack、es6、babel、hot reload、cli、vue-router、vuex,你想要的都有
开发
- Web 端:直接浏览器访问 localhost:8080/ 即可看到效果。
npm run web
- 小程序端:使用开发者工具打开 dist/mp 目录即可。
npm run mp
构建
- Web 端:构建完成会生成 dist/web 目录
npm run build
- 小程序端:构建完成会生成 dist/mp 目录
npm run build:mp
小程序端打开
需要先进入 dist/mp 目录执行 npm install
安装相关的依赖包,然后用开发者工具打开 dist/mp 目录后再进行 npm 构建(关于 npm 构建可点此查看官方文档)。
目录说明
此模板 Web 端使用单入口,通过 vue-router + 动态 import 的方式来运行;小程序端则按照业务分拆成多个页面,同属一个业务的页面则通过 vue-router 来组织。
├─ build
│ ├─ miniprogram.config.js // mp-webpack-plugin 配置
│ ├─ webpack.base.config.js // Web 端构建基础配置
│ ├─ webpack.dev.config.js // Web 端构建开发环境配置
│ ├─ webpack.mp.config.js // 小程序端构建配置
│ └─ webpack.prod.config.js // Web 端构建生产环境配置
├─ dist
│ ├─ mp // 小程序端目标代码目录,使用微信开发者工具打开,用于生产环境
│ └─ web // web 端编译出的文件,用于生产环境
├─ src
│ ├─ common // 通用组件
│ ├─ mp // 小程序端入口目录
│ │ ├─ home // 小程序端 home 页面
│ │ │ └─ main.mp.js // 小程序端入口文件
│ │ └─ other // 小程序端 other 页面
│ │ └─ main.mp.js // 小程序端入口文件
│ ├─ detail // detail 页面
│ ├─ home // home 页面
│ ├─ list // list 页面
│ ├─ router // vue-router 路由定义
│ ├─ store // vuex 相关目录
│ ├─ App.vue // Web 端入口主视图
│ └─ main.js // Web 端入口文件
└─ index.html // Web 端入口模板
其他说明
如果要使用 ts,则在 vue 的 script 标签上加上 lang="ts"
,具体可参考 src/list/Index.vue。如果要使用 reduce-loader,就不能使用 ts,因为 ts 目前没有支持内联 loader。
License(许可)
MIT
4)web端和小程序端运行效果对比图
5)vue3.x升级
查看当前框架版本,默认创建vue版本为2.x,若要将2.x项目升级至3.x,需先检查升级vue-cli,然后创建3.x项目进行文件替换。(关于vue版本升级可点此查看升级方式)
6)kbone-ui
安装kbone-ui,可参考kbone-ui文档 以及 kbone-ui示例。
安装 kbone-ui 项目
npm install kbone-ui
加载全部组件内容,并引入 weui 样式库:
import KboneUI from 'kbone-ui'
import 'kbone-ui/lib/weui/weui.css'
Vue.use(KboneUI)
使用按需引入:
import KButton from 'kbone-ui/lib/KButton.js'
import KView from 'kbone-ui/lib/KView.js'
Vue.use(KButton)
Vue.use(KView)