# base-kbone

**Repository Path**: lisa_zhu2012/base-kbone

## Basic Information

- **Project Name**: base-kbone
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-04-19
- **Last Updated**: 2020-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## kbone
> 一款跨端（小程序，web）框架，支持vue或着react开发，一次开发两端使用；大厂出品，亲爹加持

小程序没有dom接口

### kbone适配器架构
> 仿造web环境

##### render（js库）
* 仿造Dom/Bom接口
* 构造仿造Dom树
##### element（自定义组件）
* 监听仿造Dom树变化，渲染到页面
* 监听用户行为，触发仿造Dom数事件

## kbone的优势
* 支持流行框架（vue、react）
* 完整支持框架特性（v-html指令，vue-router）
* 迁移方便（提供常用Dom/Bom接口）
* 仍可使用小程序特性
* 提供DOM扩展接口（getComputedStyle）

### kbone的诞生背景
微信开放社区

多端代码复用，支持已有的特性和性能

### 什么时候使用kbone
性能损耗大
对小程序性能特别苛刻就使用原生开发

### kbone基础
使用kbone-cli快速开发
mkdir kbone
cd kbone
npm install -g kbone-cli
kbone init kbone-vue
npm run web
npm run mp
npm run build
### vue+kbone 实现 todos app
纯vue todos app->kbone-cli生成项目模板 ->将vue todos app移植到kbone

npm install @vue/cli -g
vue create vue-todos 
或者：vue init webpack my-project

### react+kbone 实现 todos app
纯react todos app->kbone-cli生成项目模板 ->将react todos app移植到kbone

npx create-react-app react-todos

### kbone项目搭建流程
##### kbone+vue项目
mkdir kbone-vue-project
cd kbone-vue-project
npm init -y
npm install webpack webpack-cli -D
mkdir build 新建build文件配置webpack
cd build
touch webpack.mp.config.js

#### 下载依赖
npm install babel-loader @babel/core css-loader file-loader mini-css-extract-plugin vue-loader vue-template-compiler mp-webpack-plugin --dev
// 压缩插件
optimize-css-assets-webapck-plugin
terser-webpack-plugin
cssnano

npm install vue vue-router --save-dev

npm install cross-env -D
package.json->script.mp 配置：cross-env：运行跨平台设置和使用环境变量的一个脚本

##### kbone+react项目
mkdir kbone-react-project
cd kbone-react-project
npm init -y
npm install webpack webpack-cli -D

#### 下载依赖
npm install 
babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @babel/runtime css-loader file-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin terser-webpack-plugin mp-webpack-plugin cssnano  --save-dev

npm install react react-dom -S
npm install react-router-dom -S

[学习资料](https://lurongtao.github.io/felixbooks-kbone/)
[源代码](https://github.com/lurongtao/felixvideos-kbone)