add vuex example

Author: Allenice

example/.npmrc

@@ -0,0 +1,2 @@
+sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
+phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/

example/package.json

@@ -17,6 +17,7 @@
     "axios": "^0.16.2",
     "babel-polyfill": "^6.23.0",
     "blueimp-md5": "^2.7.0",
+    "normalize.css": "^7.0.0",
     "qs": "^6.5.0",
     "vee-validate": "^2.0.0-rc.6",
     "vue": "^2.3.4",

example/src/components/pages/app/app.scss

@@ -1,11 +1,11 @@
 @import "base/base";
 
-#app {
-    margin-top: 60px;
+.app {
+    min-height: 100vh;
+    background: #f5f5f5;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-family: "Avenir", Helvetica, Arial, sans-serif;
-    text-align: center;
 
     a {
         color: $color-primary;

example/src/components/pages/app/app.vue

@@ -1,7 +1,6 @@
 <template>
-    <div id="app">
-        <img src="~assets/images/logo.png">
-        <router-view></router-view>
+    <div id="app" class="app">
+        <router-view :key="$route.fullPath"></router-view>
     </div>
 </template>
 <style src="./app.scss" lang="scss"></style>

example/src/components/tags/hello/hello.scss

@@ -1,5 +1 @@
 @import "base/base";
-
-.h3 {
-    color: goldenrod;
-}

example/src/components/tags/hello/hello.vue

@@ -2,7 +2,6 @@
     <div>
         <h1>Hello, {{ name }}</h1>
         <slot></slot>
-        <h3 class="h3">fff</h3>
     </div>
 </template>
 <style src="./hello.scss" lang="scss" scoped></style>

example/src/components/views/home/home.scss

@@ -1,19 +1,21 @@
 @import "base/base";
 
 .view-home {
-    color: red;
+    text-align: center;
 
-    .hello {
-        color: green;
+    img {
+        margin-top: 60px;
+    }
 
-        /deep/ {
-            .h3 {
-                color: #0f8;
-            }
-        }
+    .hello,
+    h2 {
+        margin: 20px 0;
     }
 
-    .h2 {
-        color: blue;
+    .links {
+        a {
+            margin: 0 15px;
+            text-decoration: underline;
+        }
     }
 }

example/src/components/views/home/home.vue

@@ -1,9 +1,12 @@
 <template>
     <div class="view-home">
-        <hello name="Vue-Typescript" class="hello">
-            <h2 class="h2">This is H2</h2>
-        </hello>
-        <router-link to="product">Product</router-link>
+        <img src="~assets/images/logo.png">
+        <hello name="Vue-Typescript" class="hello"></hello>
+        <h2>Example</h2>
+        <div class="links">
+            <router-link to="product">css scoped</router-link>
+            <router-link to="todo">vuex</router-link>
+        </div>
     </div>
 </template>
 <style src="./home.scss" lang="scss" scoped></style>

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

@@ -0,0 +1,27 @@
+/**
+ * Filter
+ * @author Allenice <994298628@qq.com>
+ * @date 2017-07-21 11:33:30
+ * @since 1.0.0
+ */
+@import "base/base";
+
+.filters {
+    text-align: center;
+
+    a {
+        padding: 5px 10px;
+        margin: 0 10px;
+        border: 1px solid transparent;
+        border-radius: 5px;
+        background: none;
+        color: #4f4f4f;
+        cursor: pointer;
+    }
+
+    /deep/ {
+        .cur {
+            border: 1px solid $color-primary;
+        }
+    }
+}

example/src/components/views/todo/filter/filter.ts

@@ -0,0 +1,18 @@
+/**
+ * Filter
+ * @author Allenice <994298628@qq.com>
+ * @date 2017-07-21 11:33:30
+ * @since 1.0.0
+ */
+
+import Vue from 'components/base'
+import { Component } from 'vue-property-decorator'
+import template from './filter.vue'
+
+@Component({
+    name: 'view-todo-filter',
+    mixins: [template]
+})
+export default class Filter extends Vue {
+
+}