{"id":15029293,"url":"https://github.com/kuangpf/mpvue-weui","last_synced_at":"2025-04-08T00:38:23.685Z","repository":{"id":30327303,"uuid":"124478936","full_name":"KuangPF/mpvue-weui","owner":"KuangPF","description":"用 vue 写小程序，基于 mpvue 框架重写 weui。","archived":false,"fork":false,"pushed_at":"2022-11-14T14:34:53.000Z","size":8824,"stargazers_count":1452,"open_issues_count":1,"forks_count":533,"subscribers_count":60,"default_branch":"master","last_synced_at":"2024-10-29T11:11:42.285Z","etag":null,"topics":["mpvue","vue","weui","weui-wxss","wxapp"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KuangPF.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-09T02:54:02.000Z","updated_at":"2024-10-28T06:49:45.000Z","dependencies_parsed_at":"2023-01-14T17:00:26.311Z","dependency_job_id":null,"html_url":"https://github.com/KuangPF/mpvue-weui","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KuangPF%2Fmpvue-weui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KuangPF%2Fmpvue-weui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KuangPF%2Fmpvue-weui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KuangPF%2Fmpvue-weui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KuangPF","download_url":"https://codeload.github.com/KuangPF/mpvue-weui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247755560,"owners_count":20990620,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mpvue","vue","weui","weui-wxss","wxapp"],"created_at":"2024-09-24T20:10:14.105Z","updated_at":"2025-04-08T00:38:23.661Z","avatar_url":"https://github.com/KuangPF.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [mpvue-weui](https://kuangpf.github.io/mpvue-weui/#/)\n\n\u003e 用 vue 写小程序，使用 mpvue 框架重写 WeUI。\n\n![GitHub package version](https://img.shields.io/github/package-json/v/KuangPF/mpvue-weui.svg) ![Build](https://img.shields.io/circleci/project/github/KuangPF/mpvue-weui/master.svg) ![GitHub rep size](https://img.shields.io/github/languages/code-size/KuangPF/mpvue-weui.svg) ![license](https://img.shields.io/github/license/KuangPF/mpvue-weui.svg)\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FKuangPF%2Fmpvue-weui.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FKuangPF%2Fmpvue-weui?ref=badge_shield)\n\n### 相关说明\n\n该仓库是基于 `mpvue` 重写 `WeUI`，是一个 `demo` 库，没有实现组件化，目前 [MPComponent/mpvue-weui](https://github.com/MPComponent/mpvue-weui) 已实现组件化，支持 `npm` 安装。\n\n### 前言\n\n今天早上打开电脑，像往常一样浏览一下 `github`，看到了一个很不错的框架，没错，就是 [mpvue](https://github.com/Meituan-Dianping/mpvue)。它是基于 `Vue.js` 的小程序开发框架，从底层支持 `Vue.js` 语法和构建工具体系。what，小程序可以用 `vue`写了？简直有点不太敢确定，花了[5 分钟](http://mpvue.com/mpvue/quickstart/)看了一下简介，没错，真的可以用`vue`开发小程序。真的是\\*\\*限制了我的想象力，明白又该学写了，于是就开始准备利用这个框架写一点项目，感受一下他的魅力(其实是踩坑)。\n\n### 踩坑文档\n\n[记录了踩的一些坑和一些组件在 `mpvue` 框架中的用法](https://kuangpf.github.io/mpvue-weui/#/)\n\n### WeUI\n\n由于是小程序，所以首先想到了实现一下小程序的一些组件，包括 button、loading、picker 等等。总的效果就像[weui](https://weui.io/)，或者说用 vue 重写[weui](https://weui.io/)。\n\n### 开发预览\n\n```bash\n1. git clone\ngit clone https://github.com/KuangPF/wxapp-vue.git\n\n2. 安装依赖\nnpm install\n\n3. 启动程序\nnpm run dev\n\n4. 预览\n打开微信开发者工具，新建项目，将目录指向 /dist 即可\n```\n\n### 效果\n\n\n\u003cimg width=\"390\" alt=\"mpvue-weui-demo01\" src=\"https://user-images.githubusercontent.com/20694238/66197896-e23f6380-e6cd-11e9-99bc-b120bbc81cee.png\"\u003e \u003cimg width=\"390\" alt=\"mpvue-weui-demo02\" src=\"https://user-images.githubusercontent.com/20694238/66197895-e1a6cd00-e6cd-11e9-8c82-d3974c1cc0ce.png\"\u003e\n\n\u003cimg width=\"390\" alt=\"mpvue-weui-demo03\" src=\"https://user-images.githubusercontent.com/20694238/66197894-e10e3680-e6cd-11e9-8db4-f167abe07efc.png\"\u003e \u003cimg width=\"390\" alt=\"mpvue-weui-demo04\" src=\"https://user-images.githubusercontent.com/20694238/66197893-e10e3680-e6cd-11e9-9391-0962a9c84389.png\"\u003e\n\n\n### 重写状态\n\n\u003cdetails\u003e\n\u003csummary\u003e点击展开重写状态\u003c/summary\u003e\n\n#### 表单\n\n* [x] Button\n* [x] Input\n* [x] List\n* [x] Slide-View\n* [x] Slider\n* [x] Uploader\n\n#### 基础组件\n\n* [x] Article\n* [x] Badge\n* [x] Flex\n* [x] Footer\n* [x] Gallery\n* [x] Grid\n* [x] Icons\n* [x] Loading\n* [x] Loadmore\n* [x] Panel\n* [x] Preview\n* [x] Progress\n* [x] Swiper\n\n#### 操作反馈\n\n* [x] Actionsheet\n* [x] Dialog\n* [x] Half-Screen-Dialog\n* [x] Msg\n* [x] Picker\n* [x] Toast\n\n#### 导航相关\n\n* [x] Navbar\n* [x] Navigation-Bar\n* [x] Tabbar\n\n#### 搜索相关\n\n* [x] Searchbar\n\n#### Issues 相关\n\n* [x] Request\n* [x] 页面通信（Vuex 实现）\n* [x] Rate\n\n\u003c/details\u003e\n\n### 版本日志\n[releases](https://github.com/KuangPF/mpvue-weui/releases)\n\n### Contributors\n\nThank you to all the people who already contributed to mpvue-weui. \u003cimg src=\"https://opencollective.com/mpvue-weui/contributors.svg?width=890\u0026button=false\" /\u003e\n\n### 结束语\n\n花了大概一周多的时间来完成了这个项目，过程中收获还是很大的，给我最大的感触就是现在技术发展的很快，如果不学习就真的要落后了。美团开源的[mpvue](https://github.com/Meituan-Dianping/mpvue)是一个非常不错的框架，而且开发者也正在快速的迭代，开发新的功能，所以它的前景是非常值得期待。另外就是非常感谢关注这个仓库的人，谢谢你们的支持，后续我也会继续维护这个仓库，当`mpvue`有了一些新的特性或者一些新的语法的时候也会持续更新。如果各位大佬发现了什么问题欢迎`PR` 或者 `Issues`。\n\n文档是用 [docsify](https://github.com/QingWei-Li/docsify/)构建，所有文档文件在 `/docs` 目录下面，由于里面图片比较多而且还有`gif`，可能在`git clone`的时候会有一点点慢。\n\n### License\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FKuangPF%2Fmpvue-weui.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FKuangPF%2Fmpvue-weui?ref=badge_large)\n\n### 持续维护...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuangpf%2Fmpvue-weui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkuangpf%2Fmpvue-weui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuangpf%2Fmpvue-weui/lists"}