Skip to content

Commit 3bea483

Browse files
KuangPFKuangPF
authored
Merge pull request #66 from KuangPF/weui-wxss-2.0
mpvue-weui 2.0.0
2 parents a07abfe + 96fd5f0 commit 3bea483

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+10359
-1503
lines changed

‎.gitignore

-1
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,3 @@ yarn-error.log*
1111
*.ntvs*
1212
*.njsproj
1313
*.sln
14-
package-lock.json

‎README.md

+52-72
Original file line numberDiff line numberDiff line change
@@ -5,138 +5,118 @@
55
![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)
66
[![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)
77

8-
98
### 相关说明
109

1110
该仓库是基于 `mpvue` 重写 `WeUI`，是一个 `demo` 库，没有实现组件化，目前 [MPComponent/mpvue-weui](https://github.com/MPComponent/mpvue-weui) 已实现组件化，支持 `npm` 安装。
1211

1312
### 前言
1413

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

1816
### 踩坑文档
1917

2018
[记录了踩的一些坑和一些组件在 `mpvue` 框架中的用法](https://kuangpf.github.io/mpvue-weui/#/)
2119

22-
2320
### WeUI
2421

2522
由于是小程序，所以首先想到了实现一下小程序的一些组件，包括 button、loading、picker 等等。总的效果就像[weui](https://weui.io/)，或者说用 vue 重写[weui](https://weui.io/)。
2623

2724
### 开发预览
2825

29-
``` bash
26+
```bash
3027
1. git clone
3128
git clone https://github.com/KuangPF/wxapp-vue.git
3229

3330
2. 安装依赖
34-
npm install (cnpm install)
31+
npm install
3532

3633
3. 启动程序
3734
npm run dev
3835

3936
4. 预览
4037
打开微信开发者工具，新建项目，将目录指向 /dist 即可
41-
4238
```
39+
4340
### 效果
4441

45-
![mpvue-weui-demo01](https://github.com/KuangPF/mpvue-weui/blob/master/static/demo/mpvue-weui-demo01.png)
46-
![mpvue-weui-demo02](https://github.com/KuangPF/mpvue-weui/blob/master/static/demo/mpvue-weui-demo02.png)
47-
![mpvue-weui-demo03](https://github.com/KuangPF/mpvue-weui/blob/master/static/demo/mpvue-weui-demo03.png)
48-
![mpvue-weui-demo01](https://github.com/KuangPF/mpvue-weui/blob/master/static/demo/mpvue-weui-demo04.png)
4942

50-
### 重写状态
43+
<img width="390" alt="mpvue-weui-demo01" src="https://user-images.githubusercontent.com/20694238/66197896-e23f6380-e6cd-11e9-99bc-b120bbc81cee.png"> <img width="390" alt="mpvue-weui-demo02" src="https://user-images.githubusercontent.com/20694238/66197895-e1a6cd00-e6cd-11e9-8c82-d3974c1cc0ce.png">
44+
45+
<img width="390" alt="mpvue-weui-demo03" src="https://user-images.githubusercontent.com/20694238/66197894-e10e3680-e6cd-11e9-8db4-f167abe07efc.png"> <img width="390" alt="mpvue-weui-demo04" src="https://user-images.githubusercontent.com/20694238/66197893-e10e3680-e6cd-11e9-9391-0962a9c84389.png">
46+
5147

48+
### 重写状态
5249

5350
<details>
5451
<summary>点击展开重写状态</summary>
5552

5653
#### 表单
57-
- [x] Button
58-
- [x] Input
59-
- [x] List
60-
- [x] Slider
61-
- [x] Uploader
54+
55+
* [x] Button
56+
* [x] Input
57+
* [x] List
58+
* [x] Slide-View
59+
* [x] Slider
60+
* [x] Uploader
6261

6362
#### 基础组件
64-
- [x] Article
65-
- [x] Badge
66-
- [x] Flex
67-
- [x] Footer
68-
- [x] Gallery
69-
- [x] Grid
70-
- [x] Icons
71-
- [x] Loadmore
72-
- [x] Panel
73-
- [x] Preview
74-
- [x] Progress
75-
- [x] Swiper
63+
64+
* [x] Article
65+
* [x] Badge
66+
* [x] Flex
67+
* [x] Footer
68+
* [x] Gallery
69+
* [x] Grid
70+
* [x] Icons
71+
* [x] Loading
72+
* [x] Loadmore
73+
* [x] Panel
74+
* [x] Preview
75+
* [x] Progress
76+
* [x] Swiper
7677

7778
#### 操作反馈
78-
- [x] Actionsheet
79-
- [x] Dialog
80-
- [x] Msg
81-
- [x] Picker
82-
- [x] Toast
79+
80+
* [x] Actionsheet
81+
* [x] Dialog
82+
* [x] Half-Screen-Dialog
83+
* [x] Msg
84+
* [x] Picker
85+
* [x] Toast
8386

8487
#### 导航相关
85-
- [x] Navbar
86-
- [x] Tabbar
88+
89+
* [x] Navbar
90+
* [x] Navigation-Bar
91+
* [x] Tabbar
8792

8893
#### 搜索相关
89-
- [x] Searchbar
94+
95+
* [x] Searchbar
9096

9197
#### Issues 相关
92-
- [x] Request
93-
- [x] 页面通信（Vuex 实现）
94-
- [x] Rate
98+
99+
* [x] Request
100+
* [x] 页面通信（Vuex 实现）
101+
* [x] Rate
95102

96103
</details>
97104

98105
### 版本日志
99-
100-
#### v1.0.5
101-
* 基于 `mpvue 1.0.12`
102-
* 增加星级评分
103-
104-
#### v1.0.4
105-
* 基于 `mpvue 1.0.12`
106-
* 增加页面通讯案例（vuex 实现）
107-
108-
#### v1.0.3
109-
* 基于 `mpvue 1.0.9`
110-
* 增加网络请求实例
111-
112-
#### v1.0.2
113-
* 基于 `mpvue 1.0.7`
114-
* `uploader`组件增加删除功能
115-
116-
#### v1.0.1
117-
* 基于 `mpvue 1.0.7`
118-
* 增加`swiper`组件
119-
120-
#### v1.0.0
121-
* 基于 `mpvue 1.0.5`
122-
* 完成 `WeUI` 重写和文档编写
106+
[releases](https://github.com/KuangPF/mpvue-weui/releases)
123107

124108
### Contributors
125109

126110
Thank you to all the people who already contributed to mpvue-weui. <img src="https://opencollective.com/mpvue-weui/contributors.svg?width=890&button=false" />
127111

128112
### 结束语
113+
129114
花了大概一周多的时间来完成了这个项目，过程中收获还是很大的，给我最大的感触就是现在技术发展的很快，如果不学习就真的要落后了。美团开源的[mpvue](https://github.com/Meituan-Dianping/mpvue)是一个非常不错的框架，而且开发者也正在快速的迭代，开发新的功能，所以它的前景是非常值得期待。另外就是非常感谢关注这个仓库的人，谢谢你们的支持，后续我也会继续维护这个仓库，当`mpvue`有了一些新的特性或者一些新的语法的时候也会持续更新。如果各位大佬发现了什么问题欢迎`PR` 或者 `Issues`。
130115

131116
文档是用 [docsify](https://github.com/QingWei-Li/docsify/)构建，所有文档文件在 `/docs` 目录下面，由于里面图片比较多而且还有`gif`，可能在`git clone`的时候会有一点点慢。
132117

133-
### 持续维护...
134-
135-
136-
137-
138-
118+
### License
139119

120+
[![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)
140121

141-
### License
142-
[![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)
122+
### 持续维护...

‎build/utils.js

+7-8
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,12 @@ var path = require('path')
22
var config = require('../config')
33
var ExtractTextPlugin = require('extract-text-webpack-plugin')
44

5-
exports.assetsPath = function (_path) {
6-
var assetsSubDirectory = process.env.NODE_ENV === 'production'
7-
? config.build.assetsSubDirectory
8-
: config.dev.assetsSubDirectory
5+
exports.assetsPath = function(_path) {
6+
var assetsSubDirectory = process.env.NODE_ENV === 'production' ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory
97
return path.posix.join(assetsSubDirectory, _path)
108
}
119

12-
exports.cssLoaders = function (options) {
10+
exports.cssLoaders = function(options) {
1311
options = options || {}
1412

1513
var cssLoader = {
@@ -36,8 +34,9 @@ exports.cssLoaders = function (options) {
3634
}
3735

3836
// generate loader string to be used with extract text plugin
39-
function generateLoaders (loader, loaderOptions) {
40-
var loaders = [cssLoader, px2rpxLoader, postcssLoader]
37+
function generateLoaders(loader, loaderOptions) {
38+
/* var loaders = [cssLoader, px2rpxLoader, postcssLoader] */
39+
var loaders = [cssLoader, postcssLoader]
4140
if (loader) {
4241
loaders.push({
4342
loader: loader + '-loader',
@@ -73,7 +72,7 @@ exports.cssLoaders = function (options) {
7372
}
7473

7574
// Generate loaders for standalone style files (outside of .vue)
76-
exports.styleLoaders = function (options) {
75+
exports.styleLoaders = function(options) {
7776
var output = []
7877
var loaders = exports.cssLoaders(options)
7978
for (var extension in loaders) {

0 commit comments

Comments
 (0)