Kbone初探，快速上手指南

待我称王封你为后i 2023-07-24 02:03 9阅读 0赞

### kbone的使用 ###

*  Kbone的作用
 *  Kbone快速上手
 *   *  1）安装kbone-cli
     *  2）创建项目
     *  3）项目创建成功后，打开README.md文件，信息内容如下：
     *   *  vue-kbone
         *   *  特性
             *  开发
             *  构建
             *  小程序端打开
             *  目录说明
             *  其他说明
             *  License（许可）
     *  4）web端和小程序端运行效果对比图
     *  5）vue3.x升级
     *  6）kbone-ui
     *   *   *  安装 kbone-ui 项目
             *  加载全部组件内容，并引入 weui 样式库：
             *  使用按需引入：

# Kbone的作用 #

Kbone 是一个致力于微信小程序和 Web 端同构的解决方案，Kbone 可以快速实现 Web 项目转化为微信小程序项目。

# Kbone快速上手 #

## 1）安装kbone-cli ##

npm install -g kbone-cli

## 2）创建项目 ##

kbone init my-app

注意：项目名称不能包含大写字母，以下为错误提示以及目前支持的技术栈。  
![创建项目的错误提示][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70]

## 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 构建可[点此查看官方文档][Link 1]）。

#### 目录说明 ####

此模板 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端和小程序端运行效果对比图 ##

![对比图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70 1]

## 5）vue3.x升级 ##

查看当前框架版本，默认创建vue版本为2.x，若要将2.x项目升级至3.x，需先检查升级vue-cli，然后创建3.x项目进行文件替换。（关于vue版本升级[可点此查看升级方式][Link 2]）  
![在这里插入图片描述][20200409101540858.png]

## 6）kbone-ui ##

安装kbone-ui，可参考[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)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70]: /images/20230528/f5b6d107b9f941708760597fec2a549c.png
[kbone]: https://github.com/wechat-miniprogram/kbone
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70 1]: /images/20230528/0f617cbdf5464c3bb467719ba2774450.png
[Link 2]: https://blog.csdn.net/yujing1314/article/details/102305246
[20200409101540858.png]: /images/20230528/5856a7f9a3d5415a8d979125f0fb0116.png
[kbone-ui]: https://wechat-miniprogram.github.io/kbone/docs/ui/intro/quickstart.html