fix example

Author: Allenice

example/README.md

@@ -0,0 +1,27 @@
+# {{ name }}
+
+> {{ description }}
+
+## Build Setup
+
+``` bash
+# install dependencies
+yarn install
+
+# serve with hot reload at localhost:8080
+yarn dev
+
+# build for sit env with minification
+yarn sit
+
+# build for deploy env with minification
+yarn deploy
+
+# build svg icon
+yarn svg
+```
+
+## Cli Tool
+```
+yarn cli add [componentName] -t [componentType]
+```

example/src/common/responsive.ts

@@ -0,0 +1,28 @@
+/**
+ * mobile responsive
+ */
+
+let designWidth = 750
+
+!function () {
+    let docEl = document.documentElement
+
+    let callback = function (e) {
+        let min = Math.min(window.screen.height, window.screen.width)
+        let scale = min / 750
+        let viewport = `width=${designWidth},initial-scale=${scale},maximum-scale=${scale}, minimum-scale=${scale}`
+        let meta = document.querySelector('meta[name="viewport"]')
+
+        if (!meta) {
+            meta = document.createElement('meta')
+            meta.setAttribute('name', 'viewport')
+            document.querySelector('head').appendChild(meta)
+        }
+        meta.setAttribute('content', viewport)
+        docEl.style.fontSize = designWidth / 10 + 'px'
+    }
+
+    document.addEventListener('orientationchange', callback, false)
+    document.addEventListener('resize', callback, false)
+    document.addEventListener('DOMContentLoaded', callback, false)
+}()

example/src/components/views/product/list/list.vue

@@ -13,9 +13,4 @@
         </ul>
     </div>
 </template>
-<style src="./list.scss" lang="scss"></style>
-<!--<style lang="scss" module>
-    .list {
-        color: green;
-    }
-</style>-->
+<style src="./list.scss" lang="scss" scoped></style>

example/src/components/views/todo/footer/footer.scss

@@ -11,14 +11,15 @@
     height: 40px;
     padding: 0 10px;
     font-size: 14px;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
 
     .filters {
         flex: 1;
     }
 
     .clear {
-        width: 100px;
+        width: 110px;
+        text-align: center;
     }
 }

example/src/components/views/todo/footer/footer.vue

@@ -9,7 +9,7 @@
         <div class="item-left">{{ remaining.length }} item left</div>
         <filters class="filters"></filters>
         <a class="clear" @click="clearComplete">
-            <span v-show="completed.length > 0">clear complete</span>
+            <span v-show="completed.length > 0">clear completed</span>
         </a>
     </div>
 </template>

example/src/main.ts

@@ -1,4 +1,3 @@
-
 import Vue from 'vue'
 import App from 'components/pages/app'
 import router from 'router'