vue.js、快应用 统一开发框架

By | 五月 17, 2019

vue-hap-tools

快应用的语法虽然和 vue.js 比较接近,但也有比较多的差异;当需要将 vue.js 开发的 web 应用移植到快应用平台时,又需要重复写一遍相同的逻辑,这对于一个“有追求”的程序员来说,显然无法接受,因此产生了这个工具,提高开发效率。
vue-hap-tools 基于快应用官方脚手架 hap-toolkit,支持用 vue.js 2.x 的语法及其开发方式来开发 web 与快应用程序,抹平快应用与 vue.js 开发的差异性,尽可能提高代码复用程度。现已支持 vue.js 的大部分常用特性、vue-router、vuex。

快速开始

使用基于 vue-cli 的模板工程快速开始

npm install -g @vue/cli
npm install -g @vue/cli-init
vue init Youjingyu/vue-hap my-project
cd my-project
# 或者执行 npm install
yarn

预览 web 端效果

npm run dev

预览快应用效果

# 开启hot reload模式
npm run qa-watch
# 开启预览server,用手机扫描二维码安装应用
npm run qa-server

预览快应用效果需要在支持快应用的手机(如小米、华为)上安装调试器预览工具。安装完成后,扫码即可查看效果。
下面是我们做的一个 demo,同一套代码,分别在 web 和快应用上的效果

快应用效果

快应用效果

web效果

web 效果

更进一步

vue-hap-tools 文档
vue api 支持情况
使用 vuex、vue-router
已知问题

Github下载地址