Weex AMUI

Ant Design Mobile of Weex

GitHub Get Started

Weex-AMUI

安装

npm i weex-amui -S

使用

<template>
  <div>
    <am-button
      @click="handleClick"
      text="确定"
      type="primary"/>
  </div>
</template>

<script>
  import { AmButton } from 'weex-amui';

  export default {
    components: { AmButton },
    methods: {
      handleClick () {
        // enter your code
      }
    }
  };
</script>

使用前

  • 安装 less-loader 以正确编译less源码

    npm i less less-loader -D
  • 安装 babel-plugin-component 来只引入需要的组件打包,同时如果没有安装 babel-preset-stage-0,也需要一并安装。eros用户跳过这一步,点这里看

    npm i babel-preset-stage-0 babel-plugin-component  -D
    // 增加一个plugins的配置到 .babelrc 中
    {
    "presets": ["es2015", "stage-0"],
    "plugins": [
      [
        "component",
        {
          "libraryName": "weex-amui",
          "libDir": "packages",
          "style": false
        }
        // 如果要和 weex-ui 一起用,配置加上下面这个
        ,{
          "libraryName": "weex-ui",
          "libDir": "packages",
          "style": false
        }
      ]
    ]
    }
  • 如果你使用了 weex-vue-render@1.x 版本(现在使用 weex-toolkit 创建的项目可选0.x1.x),1.x版本依赖的 weex-vue-precompiler 当前版本会把自定义组件的 click, change 等事件处理出错,需要安装一下另外一个修改的版本。

    npm i https://github.com/HMingHe/weex-vue-precompiler.git -D

eros 用户

  • 请修改 .babelrc 文件,如下:
    {
    ...
    "plugins": [
      ["import",[
        {
          "libraryName": "weex-amui",
          "libraryDirectory": "packages",
          "style": false
        }
      ]
    ...
    }

运行 Demo

npm i
npm run start

参考或者直接使用了他们的代码,感谢

Ant Design Mobile weex-ui weex-flymeui