armyja / mpvue-zanui Goto Github PK

View Code? Open in Web Editor NEW

335.0 16.0 63.0 210 KB

使用 mpvue 框架重写 zanui。

License: MIT License

JavaScript 27.37% HTML 0.16% Vue 72.47%

mpvue vue zanui zanui-weapp

mpvue-zanui's Introduction

mpvue-zanui

使用 mpvue 重写 zanui-weapp，实现了其中所有组件。

Vant Weapp 是基于有赞 Zanui 组件库进行的品牌升级，对于仍在使用 Zanui 的用户，建议逐渐使用 Vant Weapp 替换原有的组件。

Zanui 后续会进入维护状态，仓库地址为：https://github.com/youzan/zanui-weapp
Vant 在 mpvue 的使用方法可参照 https://github.com/Rychou/mpvue-vant

使用方法

运行小程序 demo

1. git clone
git clone https://github.com/samwang1027/mpvue-zanui.git

2. 安装依赖
cd mpvue-zanui && npm install

3. 启动程序
npm run dev

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

引用组件

安装 npm 包

npm install mpvue-zanui

在 App.vue 内通过 @import '~mpvue-zanui/src/assets/style/zanui.wxss'; 的方式导入zanui样式

~~3. 调用方式在 node_modules/mpvue-zanui/index.js 中，如 import {TopTips} from 'mpvue-zanui'~~

由于需要等待 mpvue-loader 升级重构，暂时仅能直接引用 import TopTips from 'mpvue-zanui/src/components/zan/toptips'
组件的详细使用方式通过阅读源码理解

Bug

Field 输入框界面中，带圆角输入框因为 css 问题，placeholder 无法靠右

todo

props 属性使用对象包装
props 中不注入 function，用 $emit 替换
CSS 全局引用改为分块引用

mpvue-zanui's People

Contributors

Stargazers

Watchers

Forkers

shiweiqi19930328 zhenghuayuan larry-wz cooluid ltinyho pop1213 lee66 archerli fing123 doujianyu nanshanys scnu-kevinkong nico-m yunfeihuang codetalks-new hualongdai menqi20 wyrover lin-sen1 wzcode imaginesheep leega0 royalrick duanmuyuan enicn cncowboy jangocheng fuzhicheng tihumihu lifeiii manfray ccj-mlp gt-front kenmyzhang yanzefeng qianduanheiye megan-ta zhongxingzhi cuitymiko lijielife hyxiaohaiyang wang1231 supbose chinanathan afuzhou lic121436 lanlianjiu delicy hhy5277 coopergao joyce-may zhaopufeng zhangyu0414 wangxianglong murielstefan bella314 bennyxqg mzwf leiyunjn china-lifei lingyi1105 weizai118 muniuyang

mpvue-zanui's Issues

为什么 import { TopTips } from 'mpvue-zanui' 不起作用？

  <view class="container">
    <view class="doc-title zan-hairline--bottom">TOPTIPS</view>
    <view class="zan-btns" style="margin-top: 30vh;">
      <button class="zan-btn" @click="showTopTips">
        显示toptips
      </button>
    </view>
    <toptips />
  </view>

  import { TopTips, getComponentByTag, extractComponentId } from 'mpvue-zanui';
  export default {
    components: {
      toptips: TopTips
    },
    data () {
      return {
        TopTips: {}
      }
    },
    methods: {
      showTopTips () {
        getComponentByTag(this, 'toptips').showZanTopTips('toptips的内容')
      }
    }
  }

npm run dev 报错没绑定event？

➜ mpvue-zanui git:(master) ✗ npm run dev

[email protected] dev /Users/wangjun/code/github/wechat/mpvue-zanui
node build/dev-server.js

events.js:183
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 127.0.0.1:8080
at Object._errnoException (util.js:1022:11)
at _exceptionWithHostPort (util.js:1044:20)
at Server.setupListenHandle [as _listen2] (net.js:1367:14)
at listenInCluster (net.js:1408:12)
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1517:7)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:97:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: node build/dev-server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/wangjun/.npm/_logs/2018-08-09T06_59_18_806Z-debug.log

nom run dev 报错

events.js:165
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 127.0.0.1:8080
at Server.setupListenHandle [as _listen2] (net.js:1346:14)
at listenInCluster (net.js:1387:12)
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1502:7)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:72:10)
Emitted 'error' event at:
at emitErrorNT (net.js:1366:8)
at process._tickCallback (internal/process/next_tick.js:178:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: node build/dev-server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/wuweichang/.npm/_logs/2018-04-23T13_32_53_372Z-debug.log

现在是不是直接可以 import {TopTips} from 'mpvue-zanui' ？

我看 mpvue 已经更新了

版本和你的统一了之后，npm run dev仍然报错，微信小程序必须文件编译不出来----来自同在深圳的工程师朋友

node 版本 $ node -v //v8.9.0
npm 版本 $ npm -v //5.6.0
可是npm run dev后还是报错
No parser and no filepath given, using 'babylon' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.
可否指点一下迷津？

npm包 stepper组件有BUG

<input
class="zan-stepper__text"
:class="{ 'zan-stepper--disabled' : min >= max }"
type="number"
data-component-id="componentId"
:data-min="min"
:data-max="max"
:value="stepper"
:disabled="min >= max"
@blur="_handleZanStepperBlur"
/>
data-component-id没有动态绑定

最近准备用mpvue和zanui开发一个项目，看zanui文档里面的使用文档都是针对小程序原生语言写的，那么zanui在mp-vue里面使用有没有什么限制？

下载下来执行npm run dev报错，求助!!!

events.js:183
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 127.0.0.1:8080
at Object._errnoException (util.js:1022:11)
at _exceptionWithHostPort (util.js:1044:20)
at Server.setupListenHandle [as _listen2] (net.js:1351:14)
at listenInCluster (net.js:1392:12)
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1501:7)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:97:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: node build/dev-server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! E:\nodeJs\node_cache_logs\2018-07-27T02_45_12_315Z-debug.log

npm run dev后dist文件夹始终没有app.js、app.json、app.wxss和project.config.json

命令行提示
No parser and no filepath given, using 'babylon' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.

npm run build报错

ERROR in static/js/vendor.js from UglifyJs
Invalid assignment [./~/mpvue-zanui/src/utils/helper.js:3,0][static/js/vendor.js:7656,40]

Build failed with errors.

项目里，这样如文档仅能直接引用 import TopTips from 'mpvue-zanui/src/components/zan/toptips'，是不行的

由于需要等待 mpvue-loader 升级重构，暂时仅能直接引用 import TopTips from 'mpvue-zanui/src/components/zan/toptips'

我的环境是基于：https://github.com/spencer1994/mpvue-cli

还是变异不过，好多报错！

zanui.wxss移动了位置

node_modules/mpvue-zanui/src/assets/zanui.wxss 已经移到了 node_modules/mpvue-zanui/src/assets/style/zanui.wxss。踩到了坑。麻烦改下MarkDown

打包出来，微信小程序必要文件app.js/app.json/app.wxss等缺失

$ node -v //8.9.0
$ npm -v //5.6.0
npm run dev会报warning: No parser and no filepath given, using 'babylon' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.
最后编译是成功的
Starting to optimize CSS... DONE Compiled successfully in 6515ms15:15:59
然而dist里面却只有components/pages/static三个文件夹，微信小程序要用的app.js/app.json/app.wxss等都没有
同样的环境跑mpvue-weui是可以的，这里问题出在了哪里？

谢谢您的付出，是我需要的，请问怎么在webpack中npm install？

关于 import 的问题

  // import { Switch as ZanSwitch } from 'mpvue-zanui'  
  import ZanSwitch from 'mpvue-zanui/src/components/zan/switch'
  export default {
    components: {
      ZanSwitch
    },

使用 import { Switch as ZanSwitch } from 'mpvue-zanui' 会如上图所示报错，使用下面那样 import 就正常了，求解