get it running

heyuanchao · Jun 21, 2016 · 2ac4afc · 2ac4afc
1 parent 62cc1ca
commit 2ac4afc
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -44,9 +44,10 @@
     "selenium-server": "2.52.0",
     "stylus-loader": "^1.4.0",
     "url-loader": "^0.5.6",
+    "vue": "^2.0.0-alpha.5",
     "vue-hot-reload-api": "^1.2.1",
     "vue-html-loader": "^1.0.0",
-    "vue-loader": "^8.0.0",
+    "vue-loader": "^9.0.1",
     "vue-style-loader": "^1.0.0",
     "webpack": "^1.12.2",
     "webpack-dev-server": "^1.12.1"

diff --git a/shells/chrome/devtools.html b/shells/chrome/devtools.html
@@ -14,7 +14,9 @@
     </style>
   </head>
   <body>
-    <div id="container"></div>
+    <div id="container">
+      <div id="app"></div>
+    </div>
     <script src="./build/devtools.js"></script>
   </body>
 </html>
diff --git a/shells/dev/index.html b/shells/dev/index.html
@@ -29,7 +29,9 @@
   </head>
   <body>
     <iframe id="target" name="target" src="target.html"></iframe>
-    <div id="container"></div>
+    <div id="container">
+      <div id="app"></div>
+    </div>
     <script src="build/devtools.js"></script>
   </body>
 </html>
diff --git a/shells/dev/target.html b/shells/dev/target.html
@@ -5,6 +5,7 @@
     <title></title>
   </head>
   <body>
+    <div id="app"></div>
     <script src="build/hook.js"></script>
     <script src="build/target.js"></script>
   </body>

diff --git a/shells/dev/target/Other.vue b/shells/dev/target/Other.vue
@@ -20,7 +20,7 @@ export default {
   },
   components: {
     mine: {
-      template: 'This is a fragment instance',
+      render: h => h('div', null, 'mine'),
       data () {
         return {
           // testing all data types

diff --git a/shells/dev/target/Target.vue b/shells/dev/target/Target.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="target">
-    <h1>{{msg}}</h1>
+    <h1>{{localMsg}}</h1>
     <button class="add" @click="add">Add</button>
     <button class="remove" @click="rm">Remove</button>
-    <input v-model="msg">
+    <input v-model="localMsg">
     <other v-for="item in items" track-by="$index"></other>
   </div>
 </template>
@@ -18,6 +18,7 @@ export default {
   },
   data() {
     return {
+      localMsg: this.msg,
       items: [1, 2]
     }
   },

diff --git a/shells/dev/target/index.js b/shells/dev/target/index.js
@@ -14,18 +14,17 @@ circular.self = circular
 
 new Vue({
   store,
-  template: `
-    <div>
-      <counter></counter>
-      <target></target>
-      <other></other>
-    </div>
-  `,
-  components: { Target, Other, Counter },
+  render (h) {
+    return h('div', null, [
+      h(Counter),
+      h(Target, {props:{msg:'hi'}}),
+      h(Other)
+    ])
+  },
   data: {
     obj: {
       items: items,
       circular
     }
   }
-}).$mount().$appendTo('body')
+}).$mount('#app')
diff --git a/src/devtools/components/ComponentInspector.vue b/src/devtools/components/ComponentInspector.vue
@@ -3,7 +3,7 @@
     <div v-show="!hasTarget" class="non-selected">
       Select a component instance to inspect.
     </div>
-    <div v-else class="main">
+    <div v-show="hasTarget" class="main">
       <section class="top">
         <span class="component-name">
           <span style="color:#ccc">&lt;</span>

diff --git a/src/devtools/components/DataField.vue b/src/devtools/components/DataField.vue
@@ -10,7 +10,7 @@
       </span>
       <span class="key">{{ field.key }}</span><span class="colon">:</span>
       <span class="value" :class="valueType">{{ formattedValue }}</span>
-      <div v-if="field.type" class="type {{ field.type | hyphen }}">
+      <div v-if="field.type" :class="['type', hyphen(field.type)]">
         {{ field.type }}
         <div class="meta" v-if="field.meta">
           <div class="meta-field" v-for="(key, val) in field.meta">
@@ -121,9 +121,7 @@ export default {
       if (this.isExpandableType) {
         this.expanded = !this.expanded
       }
-    }
-  },
-  filters: {
+    },
     hyphen: v => v.replace(/\s/g, '-')
   }
 }

diff --git a/src/devtools/index.js b/src/devtools/index.js
@@ -68,8 +68,9 @@ function initApp (shell) {
 
     app = new Vue({
       store,
-      template: '<app></app>',
-      components: { App }
-    }).$mount().$appendTo('#container')
+      render (h) {
+        return h(App)
+      }
+    }).$mount('#app')
   })
 }