Использование Weex Ui с weex-toolkit

Перед установкой

Рекомендуется, чтобы перед установкой ваша версия Node.js была >= 8.0. Для управления версиями рекомендуется использовать n. Также рекомендуется, чтобы версия npm была >= 5.

node -v
v8.2.1
npm --version
5.3.0

Убедитесь, что weex-toolkit имеет новую версию

npm install -g weex-toolkit@latest

Текущая последняя версия:

weex -v

   v1.1.0-beta.7
 - weexpack : v0.4.7-beta.26
 - weex-builder : v0.2.13-beta.4
 - weex-devtool : v0.3.2-beta.11
 - weex-previewer : v1.3.13-beta.13
 - toolkit-repair : v0.0.5

Создайте проект с помощью weex-toolkit

weex create your_project

Установите необходимые зависимости:

npm i

Используйте Weex Ui в проекте

Установите weex-ui:

npm i weex-ui@latest -S

Установите babel-preset-stage-0 и babel-plugin-component плагины. Первый используется для компиляции Babel, а второй — для оптимизации ссылок на компоненты в пакете weex-ui.

npm i babel-plugin-component babel-preset-stage-0 -D

Измените .babelrc следующим образом:

{
  "presets": ["es2015", "stage-0"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "weex-ui",
        "libDir": "packages",
        "style": false
      }
    ]
  ]
}

Попробуйте Weex Ui

Внесите изменения в src/index.vue для тестирования:

<template>
  <div>
    <wxc-button text="Open Popup"
                @wxcButtonClicked="buttonClicked">
    </wxc-button>
    <wxc-popup width="500"
               pos="left"
               :show="isShow"
               @wxcPopupOverlayClicked="overlayClicked">
    </wxc-popup>
  </div>
</template>

<script>
  import { WxcButton, WxcPopup } from 'weex-ui';
  module.exports = {
    components: { WxcButton, WxcPopup },
    data: () => ({
      isShow: false
    }),
    methods: {
      buttonClicked () {
        this.isShow = true;
      },
      overlayClicked () {
        this.isShow = false;
      }
    }
  };
</script>

Проверьте работоспособность

Запустите веб-сервер:

npm run serve

Вы должны увидеть следующее:

Протестируйте компиляцию одного файла с помощью weex:

weex src/index.vue

Протестируйте сборку и упаковку для Android:

weex platform add android

weex run android

Протестируйте сборку и упаковку для iOS:

weex platform add ios

weex run ios

Дополнительные сведения

• weex-ui-demo