安装前的准备

安装node.js，在node官网下载安装即可：http://nodejs.cn/download/
打开cmd输入node -v和npm -v显示版本号即是安装成功

node

安装weex-toolkit脚手架

在cmd中用命令行安装，输入npm install -g weex-toolkit@latest 安装weex-toolkit脚手架最新版本
同理输入weex -v检查脚手架是否安装成功

weex

创建项目

使用weex-toolkit脚手架创建一个新项目，打开cmd，在命令行中输入weex create your_project ，your_project换成你项目的名称。
安装后执行npm i命令，使其安装相关的依赖

使用Weex Ui

在cmd中切换到你创建的目录下，输入命令npm i weex-ui@latest -S安装Weex Ui，
然后在输入命令npm i babel-plugin-component babel-preset-stage-0 -D ，安装babel-preset-stage-0 和 babel-plugin-component 插件，前者用于babel编译，后者用于优化 weex-ui 包的组件引用。
同时修改.babelrc如下

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

修改.babelrc

测试项目

在cmd中切换到项目目录下，再输入命令npm start启动该项目

测试项目
按照提示在浏览器中打开http://192.168.1.6:8081，即可看到以下界面

打开界面
红色按钮是我为了测试weex ui 是否能使用加的，可在以下界面中添加代码即可出现和我一样的效果

<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>

测试weex ui