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 官方文檔

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章