kbone + vue 创建支持web和微信小程序的项目

 

什么是kbone

微信小程序开发过程中，许多开发者会遇到 小程序 与 Web 端一起的需求，由于 小程序 与 Web 端的运行环境不同，开发者往往需要维护两套类似的代码，这对开发者来说比较耗费力气，并且会出现不同步的情况。

为了解决上述问题，微信小程序推出了同构解决方案 kbone 来解决此问题。

一：安装kbone-cli

命令行安装kbone-cli脚手架，用于创建kbone项目

cnpm install -g kbone-cli

二：创建对应的kbone项目

kbone init my-app

可以根据自己所用到的技术选择对应的选项（本项目采用kbone+vue），回车确定。

创建成功之后，基本目录情况和vue-cli4目录差不多，其中在build文件夹里miniprogram.config.js进行小程序的配置，比如appid之类

 

三：在main.js中引入kbone-ui，使项目ui更贴近微信风格（可选）

安装kbone-ui

npm i kbone-ui

import KboneUI from 'kbone-ui'
import 'kbone-ui/lib/weui/weui.css'

Vue.use(KboneUI)

四：运行项目

// 开发小程序端
npm run mp

// 开发 Web 端
npm run web

// 构建 Web 端
npm run build

web端运行效果图

小程序端运行效果图

npm run mp 之后 会在dis文件中创建对应的小程序文件，使用微信开发者工具打开预览，

注意：官方提醒，尽量使用kbone-ui开发，目前功能正在逐步完善兼容，使用其他组件库可能会出现问题

kbone 官方文档