拆分模块，优化开发

src/App.vue

@@ -10,19 +10,19 @@ export default {
      * 支付宝(蚂蚁)：mpvue === my, mpvuePlatform === 'my'
      */
 
-    let logs
-    if (mpvuePlatform === 'my') {
-      logs = mpvue.getStorageSync({key: 'logs'}).data || []
-      logs.unshift(Date.now())
-      mpvue.setStorageSync({
-        key: 'logs',
-        data: logs
-      })
-    } else {
-      logs = mpvue.getStorageSync('logs') || []
-      logs.unshift(Date.now())
-      mpvue.setStorageSync('logs', logs)
-    }
+    // let logs
+    // if (mpvuePlatform === 'my') {
+    //   logs = mpvue.getStorageSync({key: 'logs'}).data || []
+    //   logs.unshift(Date.now())
+    //   mpvue.setStorageSync({
+    //     key: 'logs',
+    //     data: logs
+    //   })
+    // } else {
+    //   logs = mpvue.getStorageSync('logs') || []
+    //   logs.unshift(Date.now())
+    //   mpvue.setStorageSync('logs', logs)
+    // }
   },
   log() {
     console.log(`log at:${Date.now()}`)

src/app.json

@@ -2,7 +2,8 @@
   "pages": [
     "pages/index/main",
     "pages/logs/main",
-    "pages/counter/main"
+    "pages/counter/main",
+    "pages/start/main"
   ],
   "window": {
     "backgroundTextStyle": "light",

src/components/device/connected.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <van-row class="padding">
+      <van-col span="5">
+        <div class="device_bg flex flex-direction align-center justify-center">
+          <img src="https://img.shuimuai.com/web/phone.png" alt="" class="device_phone">
+          <text class="text-gray device_text"> 我的手机</text>
+        </div>
+      </van-col>
+      <van-col span="3" offset="1">
+        <div class="dot_container flex align-center">
+          <div class="dot_wait">
+            <img src="https://img.shuimuai.com/m_sign_gou%402x.png" alt="" class="moving_dot">
+          </div>
+        </div>
+      </van-col>
+      <van-col span="5" offset="0">
+        <div class="device_bg flex flex-direction align-center justify-center">
+          <img src="https://img.shuimuai.com/web/sign_green.png" alt="" class="sign_green">
+          <img src="https://img.shuimuai.com/web/brain.png" alt="" class="device_brain">
+          <text class="text-gray device_text"> 水母智能脑环</text>
+        </div>
+      </van-col>
+    </van-row>
+    <!--        按钮组合-->
+    <van-row>
+      <van-col span="9" offset="1">
+        <button class="cu-btn bg-red lg text-white">
+          <img src="https://img.shuimuai.com/m_duankainaohuan.png" class="cut_brain_icon" alt="">
+          <text class="padding-lr cut_text">断开脑环</text>
+        </button>
+      </van-col>
+
+      <van-col span="12" offset="1">
+        <button class="cu-btn bg-red lg cu-btn-primary" @click="open_choose_toy">
+          <img src="https://img.shuimuai.com/m_xuanzewanju.png" alt="" class="cut_brain_icon">
+          <text class="padding-lr cut_text">选择玩具</text>
+        </button>
+      </van-col>
+    </van-row>
+    <div class="boy_session padding">
+      <text class="boy_session_text">点击选择你喜欢 的玩具类别就可 以开始玩囖！</text>
+    </div>
+    <img src="https://img.shuimuai.com/web/boy.png" alt="" class="connected_boy">
+  </div>
+</template>
+
+<script>
+export default {
+  name: "connected",
+  methods:{
+    open_choose_toy(){
+      this.$emit('open_choose_toy')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/device/connecting.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <van-row class="padding">
+      <van-col span="5" offset="4">
+        <div class="device_bg flex flex-direction align-center justify-center">
+          <img src="https://img.shuimuai.com/web/phone.png" alt="" class="device_phone">
+          <text class="text-gray device_text"> 我的手机</text>
+        </div>
+      </van-col>
+      <van-col span="3" offset="1">
+        <div class="dot_container flex align-center">
+          <div class="dot_wait">
+            <img v-if="status == 1" src="https://img.shuimuai.com/web/dot.png" alt="" class="moving_dot"
+                 :class="{moving:status==1}"
+            />
+            <img v-if="status == 2" src="https://img.shuimuai.com/m_sign_gou%402x.png" alt="" class="moving_dot">
+            <img v-if="status == 3" src="https://img.shuimuai.com/fail.png" alt="" class="moving_dot">
+          </div>
+        </div>
+      </van-col>
+      <van-col span="5" offset="0">
+        <div class="device_bg flex flex-direction align-center justify-center">
+          <img src="https://img.shuimuai.com/web/brain.png" alt="" class="device_brain">
+          <text class="text-gray device_text"> 水母智能脑环</text>
+        </div>
+      </van-col>
+    </van-row>
+    <van-row class="text-center">
+      <text class="text-gray text-lg">
+        <template v-if="status == 1">
+          连接中...
+        </template>
+        <template v-if="status == 2">
+          连接成功
+        </template>
+        <template v-if="status == 3">
+          连接失败
+        </template>
+      </text>
+    </van-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "connecting",
+  props:['status']
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/device/device.vue

@@ -0,0 +1,200 @@
+<template>
+  <div id="device_container" class="padding-lr">
+    <div class="device">
+      <div class="head flex justify-between">
+        <div>
+          <div class="line"></div>
+          <div class="title">我的设备</div>
+        </div>
+        <div class="my_msg">
+          <text class="cuIcon-mark"></text>
+          <text class="under_line">消息中心</text>
+        </div>
+      </div>
+      <div v-if="connect_toy==0">
+
+        <!--      未连接部分-->
+        <div class="connect_box" v-if="status == 0">
+          <device_unconnect @open_scan="open_scan"></device_unconnect>
+        </div>
+
+        <!--      连接中-->
+        <div class="connecting_box" v-if="status != 0 && connect_show == false">
+          <device_connecting :status="status"></device_connecting>
+        </div>
+
+        <!-- 已链接 -->
+        <div class="connected_box" v-if="connect_show">
+          <device_connected @open_choose_toy="open_choose_toy"></device_connected>
+        </div>
+
+        <!--      选择玩具-->
+        <van-popup :show="choose_toy_window.show" @close="on_close"
+                   position="bottom"
+                   round
+                   closeable
+                   safe-area-inset-bottom
+        >
+          <div class="head padding">
+            <div>
+              <div class="line"></div>
+              <div class="title">选择玩具</div>
+            </div>
+          </div>
+          <div class="padding toy_list">
+            <van-row gutter="8">
+              <van-col span="8" v-for="(toy,index) in toy_list" :key="index">
+                <div class="toy_item flex flex-direction justify-center align-center"
+                     @click="choose_toy(index)"
+                     :class="toy_action == toy.id?'toy_item_action_bg':'toy_item_normal_bg'">
+                  <img :src="toy.img" alt="" class="toy_img">
+                  <text class="toy_text padding-top">{{ toy.name }}</text>
+                </div>
+              </van-col>
+            </van-row>
+          </div>
+          <div class="toy_actions padding text-center">
+            <view class="text-gray toy_action_text padding">选择你最感兴趣的项目，点击“选好了”以后将会自动连接</view>
+            <button class="cu-btn lg cu-btn-primary text-white text-center padding" @click="choose_ok">选好了</button>
+          </div>
+        </van-popup>
+      </div>
+      <div v-else>
+        <!--      玩具模块-->
+        <!--      玩具连接中-->
+        <div class="connecting_toy">
+          <toy_connecting :connect_toy="connect_toy"></toy_connecting>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+//蓝牙未连接
+import device_unconnect from "@/components/device/unconnect";
+//蓝牙连接中
+import device_connecting from "@/components/device/connecting";
+//蓝牙完成链接
+import device_connected from '@/components/device/connected';
+//连接玩具
+import toy_connecting from '@/components/device/toy/connecting'
+
+let $this;
+export default {
+  name: "device",
+  components: {
+    device_unconnect, device_connecting, device_connected, toy_connecting
+  },
+  data() {
+    return {
+      //0为未连接，1：连接中，2：已连接 3：连接失败
+      status: 0,
+      choose_toy_window: {
+        show: false
+      },
+      toy_list: [
+        {
+          id: 1,
+          name: "智能喷泉",
+          img: "https://img.shuimuai.com/web/toy_car.png"
+        },
+        {
+          id: 2,
+          name: "智能喷雾恐龙",
+          img: "https://img.shuimuai.com/web/toy_dinasour.png"
+        },
+        {
+          id: 3,
+          name: "智能喷雾恐龙2",
+          img: "https://img.shuimuai.com/web/toy_dinasour.png"
+        },
+        {
+          id: 4,
+          name: "智能轨道车",
+          img: "https://img.shuimuai.com/web/toy_car_roat.png"
+        },
+        {
+          id: 5,
+          name: "智能越野车",
+          img: "https://img.shuimuai.com/web/toy_car.png"
+        },
+        {
+          id: 6,
+          name: "智能越野车2",
+          img: "https://img.shuimuai.com/web/toy_car.png"
+        },
+      ],
+      toy_action: 1,
+      connect_show: false,
+      //连接玩具 0:未连接 1：连接中 2：已连接 3：连接失败
+      connect_toy: 0
+    }
+  },
+  watch: {
+    status(newStatus, oldStatus) {
+      if (oldStatus == 0 && newStatus == 1) {
+        setTimeout(() => {
+          $this.success_connected()
+        }, 2000)
+      }
+    },
+    connect_toy($new, $old) {
+      if ($old == 0 && $new == 1) {
+        setTimeout(() => {
+          $this.connect_toy = 2
+        }, 2000)
+      }
+    }
+  },
+  methods: {
+    //打开 扫描二维码
+    open_scan() {
+      let $this = this
+      wx.scanCode({
+        success: (res) => {
+          let $data = res
+          if ($data.result) {
+            $this.status = 1
+          }
+        }
+      })
+    },
+    //成功连接的方法
+    success_connected() {
+      $this.status = 2
+      setTimeout(() => {
+        $this.connect_show = true
+      }, 2000)
+    },
+    //关闭窗口的方法
+    on_close() {
+      $this.choose_toy_window.show = false
+    },
+    //选择玩具
+    choose_toy($index) {
+      $this.toy_action = $this.toy_list[$index].id
+    },
+    // 打开选择玩具窗口
+    open_choose_toy() {
+      $this.choose_toy_window.show = true
+    },
+    // 选好玩具
+    choose_ok() {
+      $this.on_close()
+      $this.change_toy_connect_status(1)
+    },
+    change_toy_connect_status($status = 0) {
+      $this.connect_toy = $status
+    }
+  },
+  created() {
+    $this = this
+  }
+}
+</script>
+
+<style scoped>
+@import "../static/device.css";
+</style>

src/components/device/toy/connecting.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <van-row class="padding">
+      <van-col span="5">
+        <div class="device_bg flex flex-direction align-center justify-center">
+          <img src="https://img.shuimuai.com/web/phone.png" alt="" class="device_phone">
+          <text class="text-gray device_text"> 我的手机</text>
+        </div>
+      </van-col>
+      <van-col span="3" offset="1">
+        <div class="dot_container flex align-center">
+          <div class="dot_wait">
+            <img src="https://img.shuimuai.com/m_sign_gou%402x.png" alt="" class="moving_dot">
+          </div>
+        </div>
+      </van-col>
+      <van-col span="5" offset="0">
+        <div class="device_bg flex flex-direction align-center justify-center">
+          <img src="https://img.shuimuai.com/web/sign_green.png" alt="" class="sign_green">
+          <img src="https://img.shuimuai.com/web/brain.png" alt="" class="device_brain">
+          <text class="text-gray device_text"> 已连接</text>
+        </div>
+      </van-col>
+      <van-col span="3" offset="1">
+        <div class="dot_container flex align-center">
+          <div class="dot_wait">
+            <img v-if="connect_toy == 1" src="https://img.shuimuai.com/web/dot.png" alt="" class="moving_dot"
+                 :class="{moving:connect_toy==1}"
+            />
+            <img v-if="connect_toy == 2" src="https://img.shuimuai.com/m_sign_gou%402x.png" alt="" class="moving_dot">
+          </div>
+        </div>
+      </van-col>
+      <van-col span="5" offset="0">
+        <div class="device_bg flex flex-direction align-center justify-center">
+          <img src="https://img.shuimuai.com/web/uav.png" alt="" class="uav_toy">
+          <text class="text-gray device_text">
+            <template v-if="connect_toy == 1">
+              智能喷雾恐龙
+            </template>
+            <template v-if="connect_toy == 2">
+              已连接
+            </template>
+          </text>
+        </div>
+      </van-col>
+    </van-row>
+    <!--        按钮组合-->
+    <van-row>
+      <van-col span="7" offset="1">
+        <button class="cu-btn bg-red lg text-white">
+          <img src="https://img.shuimuai.com/m_duankainaohuan.png" class="cut_brain_icon" alt="">
+          <text class="padding-lr cut_text">断开脑环</text>
+        </button>
+      </van-col>
+
+      <van-col span="12" offset="1" v-if="connect_toy == 1">
+        <van-row class="text-center">
+          <text class="text-gray text-lg">
+            连接中...
+          </text>
+        </van-row>
+      </van-col>
+
+      <!--      已经连接玩具-->
+      <div v-if="connect_toy == 2">
+        <van-col span="7" offset="1">
+          <button class="cu-btn bg-red lg cu-btn-primary" @click="open_choose_toy">
+            <img src="https://img.shuimuai.com/m_xuanzewanju.png" alt="" class="cut_brain_icon">
+            <text class="padding-lr cut_text">选择玩具</text>
+          </button>
+        </van-col>
+
+        <van-col span="7" offset="1">
+          <button class="cu-btn bg-red lg text-white">
+            <img src="https://img.shuimuai.com/m_duankainaohuan.png" class="cut_brain_icon" alt="">
+            <text class="padding-lr cut_text">游戏中..</text>
+          </button>
+        </van-col>
+
+      </div>
+    </van-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "connected",
+  props: ['connect_toy'],
+  methods: {
+    open_choose_toy() {
+      this.$emit('open_choose_toy')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/device/unconnect.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <van-row>
+      <van-col span="11" class="text-gray text-sm left" offset="1">
+        <view>1.打开手机蓝牙</view>
+        <view>2.长按头环侧面按钮启动头环</view>
+        <view>3.点击扫码开始连接</view>
+      </van-col>
+
+      <van-col span="8" offset="2">
+        <img src="https://img.shuimuai.com/lanyashuimu.png" class="connect_img"/>
+      </van-col>
+    </van-row>
+    <button class="cu-btn lg cu-btn-primary text-white text-center" @click="open_scan">扫码连接脑环</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "unconnect",
+  methods: {
+    open_scan() {
+      this.$emit('open_scan')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/index/device.vue

@@ -1,77 +0,0 @@
-<template>
-  <div id="device_container">
-    <div class="device">
-      <div class="head">
-        <div>
-          <div class="line"></div>
-          <div class="title">我的设备</div>
-        </div>
-      </div>
-      <div class="connect_box">
-        <van-row>
-          <van-col span="12">
-            <view>1.打开手机蓝牙</view>
-            <view>2.长按头环侧面按钮启动头环</view>
-            <view>3.点击扫码开始连接</view>
-          </van-col>
-
-          <van-col span="12">
-            <view class="ring_2">
-              <view class="ring_3">
-                <img src="https://img.shuimuai.com/lanyashuimu.png" class="connect_img"/>
-              </view>
-            </view>
-          </van-col>
-        </van-row>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "device"
-}
-</script>
-
-<style scoped>
-#device_container {
-  position: relative;
-  top: -60px;
-}
-
-.head .line {
-  width: 4px;
-  height: 14px;
-  background-color: #5d4db8;
-  margin-right: 7px;
-}
-
-.head view {
-  display: flex;
-  justify-self: start;
-  align-items: center;
-}
-
-.ring_2 {
-  width: 199px;
-  height: 203px;
-  background: rgba(93, 77, 184, 0);
-  border: 2px solid #F7F7F7;
-  opacity: 0.43;
-  border-radius: 50%;
-}
-
-.ring_3 {
-  width: 158px;
-  height: 158px;
-  background: rgba(93, 77, 184, 0);
-  border: 3px solid #F6F6F6;
-  opacity: 0.54;
-  border-radius: 50%;
-}
-.connect_img{
-  width: 35px;
-  height: 30px;
-}
-</style>

src/components/static/device.css

@@ -0,0 +1,204 @@
+#device_container {
+  position: relative;
+  top: -60px;
+}
+
+.head .line {
+  width: 4px;
+  height: 14px;
+  background-color: #5d4db8;
+  margin-right: 7px;
+}
+
+.head view {
+  display: flex;
+  justify-self: start;
+  align-items: center;
+}
+
+.ring_2 {
+  width: 199px;
+  height: 203px;
+  background: rgba(93, 77, 184, 0);
+  border: 2px solid #F7F7F7;
+  opacity: 0.43;
+  border-radius: 50%;
+}
+
+.ring_3 {
+  width: 158px;
+  height: 158px;
+  background: rgba(93, 77, 184, 0);
+  border: 3px solid #F6F6F6;
+  opacity: 0.54;
+  border-radius: 50%;
+}
+
+.connect_img {
+  width: 85px;
+  height: 80px;
+}
+
+.left {
+  line-height: 35px;
+}
+
+/*设备连接模块*/
+.device_bg {
+  width: 90px;
+  height: 100px;
+  background-image: url("https://img.shuimuai.com/web/device_bg.png");
+  background-position: center;
+  background-size: 100% 100%;
+}
+
+.dot_container {
+  height: 100px;
+}
+
+.dot_wait {
+  height: 5px;
+  width: 80px;
+  background-image: url("https://img.shuimuai.com/web/connect_line.png");
+  background-position: center;
+  background-size: 100% 100%;
+}
+
+.device_phone {
+  width: 30px;
+  height: 40px;
+}
+
+.device_brain {
+  width: 40px;
+  height: 40px;
+}
+
+.device_text {
+  padding: 3px;
+  font-size: 10px;
+}
+
+.moving_dot {
+  width: 18px;
+  height: 18px;
+  position: relative;
+  left: 15px;
+  bottom: 7px;
+}
+
+.moving {
+  animation: moving 2s linear infinite;
+}
+
+/*左右移动动画*/
+@keyframes moving {
+  0% {
+    left: 0px;
+  }
+  50% {
+    left: 35px;
+  }
+  100% {
+    left: 0px;
+  }
+}
+
+/*玩具列表*/
+.toy_list {
+  overflow-x: scroll;
+}
+
+.toy_item {
+  width: 120px;
+  height: 130px;
+}
+
+/*玩具不同背景*/
+.toy_item_normal_bg {
+  background-image: url("https://img.shuimuai.com/web/toy_bg.png");
+  background-position: center;
+  background-size: 100% 100%;
+}
+
+/*玩具选中背景*/
+.toy_item_action_bg {
+  background-image: url("https://img.shuimuai.com/web/toy_bg_action.png");
+  background-position: center;
+  background-size: 100% 100%;
+}
+
+/*玩具图片*/
+.toy_img {
+  width: 75px;
+  height: 65px;
+}
+
+.toy_text {
+  font-size: 12px;
+}
+
+.toy_action_text {
+  font-size: 11px;
+  width: 100%;
+}
+
+.cut_brain_icon {
+  width: 11px;
+  height: 11px;
+}
+
+.cut_text {
+  font-size: 12px;
+}
+
+/*设备绿色信号灯*/
+.sign_green {
+  width: 20px;
+  height: 10px;
+  position: relative;
+  top: 18px;
+  left: 1px;
+}
+
+
+/*水母男孩*/
+.connected_boy {
+  width: 110px;
+  height: 110px;
+  position: absolute;
+  right: -60px;
+  top: 63px;
+}
+
+.boy_session {
+  background-image: url("https://img.shuimuai.com/web/boy_session.png");
+  background-position: center;
+  background-size: 100% 100%;
+  width: 120px;
+  height: 100px;
+  position: absolute;
+  top: 18px;
+  right: 25px;
+  z-index: 4;
+}
+
+.boy_session_text {
+  font-size: 12px;
+  color: #6B6B6B;
+}
+
+.device_electric {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  top: 0px;
+  right: 0px;
+  z-index: 5;
+}
+
+/*玩具模块*/
+.uav_toy{
+  width: 40px;
+  height: 40px;
+}

src/pages/index/index.vue

@@ -41,7 +41,7 @@ import login_container from '@/components/index/login'
 import scan_container from '@/components/index/scan'
 import regist_container from '@/components/index/regist'
 import personal_container from "@/components/index/personal";
-import device_container from "@/components/index/device";
+import device_container from "@/components/device/device";
 
 
 export default {

src/pages/index/main.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
     "van-row": "../../static/vant/row/index",
-    "van-col": "../../static/vant/col/index"
+    "van-col": "../../static/vant/col/index",
+    "van-popup": "../../static/vant/popup/index"
   }
 }

src/pages/start/index.css

@@ -0,0 +1,78 @@
+.login_card {
+  height: 410px;
+  background-color: #ffffff;
+  position: relative;
+  z-index: 3;
+  top: -100px;
+  margin: 0px 10px;
+  background-image: url('https://img.shuimuai.com/shuimugongzhu.png');
+  background-position: center;
+  background-size: 100% 100%;
+  background-color: rgba(255, 255, 255, 0);
+}
+
+/*体验页面*/
+.slogen {
+  color: #4B4B4B;
+  font-size: 13px;
+}
+
+
+.sub_slogen {
+  font-size: 22px;
+  margin-top: 130px;
+  color: #4C4C4C;
+}
+
+/*扫码页*/
+.sub_slogen_sm {
+  font-size: 13px;
+  margin: 180px auto 0px;
+  color: #4C4C4C;
+}
+
+/*注册页面*/
+.register_form_container {
+  margin: 120px auto 0px;
+  width: 90%;
+  height: 108px;
+  background: rgba(242, 243, 255, 0.6);
+  box-shadow: 0px 3px 7px 0px rgba(159, 159, 159, 0.84);
+  border-radius: 11px;
+}
+
+/* 功能服务 */
+.service {
+  position: absolute;
+  width: 100%;
+  padding: 5px 7px 35px;
+  margin-top: 20px;
+  top: 560px;
+}
+
+.service .content {
+  width: 100%;
+  float: left;
+}
+
+.service .content image {
+  width: 50%;
+  height: 89px;
+}
+
+.head .line {
+  width: 4px;
+  height: 14px;
+  background-color: #5d4db8;
+  margin-right: 7px;
+}
+
+.head view {
+  display: flex;
+  justify-self: start;
+  align-items: center;
+}
+
+.cu-form-group {
+  background-color: rgba(255, 255, 255, 0);
+}

src/pages/start/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div id="container">
+    <button class="cu-btn bg-primary text-white">hello world</button>
+  </div>
+</template>
+
+<script>
+import banner from '@/components/banner'
+import login_container from '@/components/index/login'
+import scan_container from '@/components/index/scan'
+import regist_container from '@/components/index/regist'
+import personal_container from "@/components/index/personal";
+import device_container from "@/components/device/device";
+
+
+export default {
+  name: "index_container",
+  components: {
+    banner, login_container, scan_container, regist_container, personal_container, device_container
+  },
+  data() {
+    return {
+      // 三种状态 扫码scan 注册regist 登录login
+      status: "regist",
+      is_login: true
+    }
+  },
+  methods: {
+    get_init_data() {
+    },
+    //切换到扫码
+    change_status($status) {
+      this.status = $status
+    }
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped>
+@import "index.css";
+</style>

src/pages/start/main.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './index'
+
+// add this to handle exception
+Vue.config.errorHandler = function (err) {
+  if (console && console.error) {
+    console.error(err)
+  }
+}
+
+const app = new Vue(App)
+app.$mount()

src/pages/start/main.json

@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "van-row": "../../static/vant/row/index",
+    "van-col": "../../static/vant/col/index",
+    "van-popup": "../../static/vant/popup/index"
+  }
+}