基于 mpvue 的 weui 框架

3,039 阅读1分钟
原文链接: github.com

用 vue 写小程序,使用 mpvue 框架重写 WeUI。

前言

今天早上打开电脑,像往常一样浏览一下 github,看到了一个很不错的框架,没错,就是 mpvue。它是基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系。what,小程序可以用 vue写了?简直有点不太敢确定,花了 5分钟看了一下简介,没错,真的可以用vue开发小程序。真的是**限制了我的想象力,明白又该学写了,于是就开始准备利用这个框架写一点项目,感受一下他的魅力(其实是踩坑)。

WeUI

由于是小程序,所以首先想到了实现一下小程序的一些组件,包括 button、loading、picker 等等。总的效果就像weui,或者说用 vue 重写weui

Use

方式一:
1. git clone
git clone https://github.com/KuangPF/wxapp-vue.git

2. 安装依赖
npm install (cnpm install)

3. 启动程序
npm run dev

4. 预览
打开微信开发者工具,新建项目,将目录指向 /dist 即可

方式二:
npm 安装 (准备中...)

效果

mpvue-weui-demo01 mpvue-weui-demo02 mpvue-weui-demo03 mpvue-weui-demo01

重写状态

表单

  • Button
  • Input
  • List
  • Slider
  • Uploader

基础组件

  • Article
  • Badge
  • Flex
  • Footer
  • Gallery
  • Grid
  • Icons
  • Loadmore
  • Panel
  • Preview
  • Progress

操作反馈

  • Actionsheet
  • Dialog
  • Msg
  • Picker
  • Toast

导航相关

  • Navbar
  • Tabbar

搜索相关

  • Searchbar

正在重写中...