1 <template>
 2     <text class="test">a test of vue component in weex.</text>
 3 </template>
 4 
 5 <script>
 6 export default {
 7   name: \'mytest.vue\'
 8 }
 9 </script>
10 
11 <style scoped>
12     .test{
13         background-color: #41B883;
14         font-size: 60px;
15         margin: 20px;
16     }
17 </style>

<template>
  <div class="wrapper">
    <image :src="logo" class="logo" />
    <text class="greeting">The environment is ready!</text>
    <HelloWorld/>
    <mytest></mytest>
  </div>
</template>

<script>
import HelloWorld from \'@/components/HelloWorld\'
import mytest from \'@/components/mytest\'

export default {
  name: \'App\',
  components: {
    mytest,
    HelloWorld,
  },
  data () {
    return {
      logo: \'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png\'
    }
  }
}
</script>

<style scoped>
  .wrapper {
    justify-content: center;
    align-items: center;
  }
  .logo {
    width: 400px;
    height: 200px;
  }
  .greeting {
    text-align: center;
    margin-top: 70px;
    font-size: 50px;
    color: #41B883;
  }
  .message {
    margin: 30px;
    font-size: 32px;
    color: #727272;
  }
</style>

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