diff --git a/package.json b/package.json
index 9be420a4a0c9ba0a9446d134ebc9f1453da947fb..2ae5f8dcd0cc74503674abb91a0273b6014949af 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "echarts": "^4.2.1",
     "element-ui": "^2.6.1",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
     "vue": "^2.6.6",
+    "vue-echarts": "^4.0.1",
     "vue-router": "^3.0.2",
     "vuex": "^3.1.0"
   },
diff --git a/src/App.vue b/src/App.vue
index 49de6475c9f11bf8ce497bfe97c19719fa3f813d..f53d4149ae8a39d138d5d630147251eae7d16e03 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,7 +45,7 @@ export default {
 }
 
 .el-header, .el-footer {
-  background-color: #409EFF;
+  background-color: #333;
   color: #fff;
   text-align: center;
   line-height: 60px;
diff --git a/src/assets/images/HTML-404-Error-Page.gif b/src/assets/images/HTML-404-Error-Page.gif
new file mode 100755
index 0000000000000000000000000000000000000000..6c95031cb1d160a142ecc57daeff90c9741784e5
Binary files /dev/null and b/src/assets/images/HTML-404-Error-Page.gif differ
diff --git a/src/assets/style/common.styl b/src/assets/style/common.styl
new file mode 100755
index 0000000000000000000000000000000000000000..becdb3164d611c1381ae174b3c6d98ac5e5e4ede
--- /dev/null
+++ b/src/assets/style/common.styl
@@ -0,0 +1,10 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+ul>li {
+  list-style: none;
+}
+.font16 {
+  font-size: 16px;
+}
\ No newline at end of file
diff --git a/src/assets/style/element-override.styl b/src/assets/style/element-override.styl
new file mode 100755
index 0000000000000000000000000000000000000000..c5336736fb3b4ec1f681bb39061a76b37b968a01
--- /dev/null
+++ b/src/assets/style/element-override.styl
@@ -0,0 +1,3 @@
+.el-main {
+  line-height: normal;
+}
diff --git a/src/common/api/shop.js b/src/common/api/shop.js
new file mode 100755
index 0000000000000000000000000000000000000000..990be26570dce3c064d4ce85ac354375d5ac4ea6
--- /dev/null
+++ b/src/common/api/shop.js
@@ -0,0 +1,23 @@
+/**
+ * Mocking client-server processing
+ */
+const _products = [
+  {"id": 1, "title": "华为 Mate 20", "price": 3999, "inventory": 2},
+  {"id": 2, "title": "小米 9", "price": 2999, "inventory": 0},
+  {"id": 3, "title": "OPPO R17", "price": 2999, "inventory": 5}
+]
+
+export default {
+  getProducts (cb) {
+    setTimeout(() => cb(_products), 100)
+  },
+
+  buyProducts (products, cb, errorCb) {
+    setTimeout(() => {
+      // simulate random checkout failure.
+      Math.random() > 0.5
+        ? cb()
+        : errorCb()
+    }, 100)
+  }
+}
\ No newline at end of file
diff --git a/src/components/CustomHeader.vue b/src/components/CustomHeader.vue
index d1674196f5f00cec9646cebc09ec23f6124e7f45..40ee14dd9590b5651910fb9e926416e88f6a9497 100755
--- a/src/components/CustomHeader.vue
+++ b/src/components/CustomHeader.vue
@@ -13,20 +13,6 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
+<style>
+  
 </style>
diff --git a/src/components/CustomSlide.vue b/src/components/CustomSlide.vue
index 7960dd5fb89d356a322d4d8b58e06d425bc25816..861bcfb0b589e2be746af01a3f902192188fa414 100755
--- a/src/components/CustomSlide.vue
+++ b/src/components/CustomSlide.vue
@@ -3,42 +3,55 @@
         <el-row class="tac">
             <el-col :span="24">
                 <el-menu
-                default-active="2"
+                default-active="/"
+                :default-openeds="['1', '/']"
                 class="el-menu-vertical-demo"
                 @open="handleOpen"
                 @close="handleClose"
+                @select="handleSelect"
                 background-color="#000000"
                 text-color="#fff"
                 active-text-color="#ffd04b">
                     <el-submenu index="1">
                         <template slot="title">
                             <i class="el-icon-location"></i>
-                            <span>导航一</span>
+                            <span>基础部分</span>
                         </template>
                         <el-menu-item-group>
-                            <el-menu-item index="1-1">
-                                <router-link to="/"> 首页 </router-link>
-                            </el-menu-item>
-                            <el-menu-item index="1-2">
-                                <router-link to="/table"> 表格 </router-link>
-                            </el-menu-item>
-                            <el-menu-item index="1-2">
-                                <router-link to="/parent"> 通信 </router-link>
-                            </el-menu-item>
+                            <el-menu-item index="/"> 首页 </el-menu-item>
+                            <el-menu-item index="/table"> Element表格 </el-menu-item>
+                            <el-menu-item index="/parent"> 组件通信 </el-menu-item>
+                        </el-menu-item-group>
+                    </el-submenu>
+                    <el-submenu index="2">
+                        <template slot="title">
+                            <i class="el-icon-location"></i>
+                            <span>第三方</span>
+                        </template>
+                        <el-menu-item-group>
+                            <el-menu-item index="/drawer"> drawer </el-menu-item>
+                            <el-menu-item index="/echarts"> echarts </el-menu-item>
+                        </el-menu-item-group>
+                    </el-submenu>
+                    <el-submenu index="3">
+                        <template slot="title">
+                            <i class="el-icon-location"></i>
+                            <span>Vue Router</span>
+                        </template>
+                        <el-menu-item-group>
+                            <el-menu-item index="/routes"> 动态路由 </el-menu-item>
+                            <!-- <el-menu-item index="/echarts"> ec </el-menu-item> -->
+                        </el-menu-item-group>
+                    </el-submenu>
+                    <el-submenu index="4">
+                        <template slot="title">
+                            <i class="el-icon-location"></i>
+                            <span>Vuex最佳实践</span>
+                        </template>
+                        <el-menu-item-group>
+                            <el-menu-item index="/shopping-card"> shopping card </el-menu-item>
                         </el-menu-item-group>
                     </el-submenu>
-                    <el-menu-item index="2">
-                        <i class="el-icon-menu"></i>
-                        <span slot="title">导航二</span>
-                    </el-menu-item>
-                    <el-menu-item index="3" disabled>
-                        <i class="el-icon-document"></i>
-                        <span slot="title">导航三</span>
-                    </el-menu-item>
-                    <el-menu-item index="4">
-                        <i class="el-icon-setting"></i>
-                        <span slot="title">导航四</span>
-                    </el-menu-item>
                 </el-menu>
             </el-col>
         </el-row>    
@@ -53,6 +66,10 @@ export default {
         },
         handleClose(key, keyPath) {
             console.log(key, keyPath);
+        },
+        handleSelect(index, indexPath) {
+            console.log(indexPath)
+            this.$router.push(index)
         }
     }
 }
diff --git a/src/components/Home.vue b/src/components/Home.vue
new file mode 100755
index 0000000000000000000000000000000000000000..c489aeef4ba3242b49d97e33507bda65e4b83789
--- /dev/null
+++ b/src/components/Home.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="home-block">
+    <ul>
+      <li v-for="list in navList" :key="list.id">
+        <router-link :to="list.url"> {{ list.label }} </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    data: function () {
+      return {
+      }
+    },
+    computed: {
+      ...mapState({
+        navList: function (state) {
+          return state.homeIndex.navList
+        }
+      })
+    }
+  }
+</script>
+
+<style lang="stylus" scoped>
+  .home-block {
+    ul>li {
+      background-color: #42b983;
+      display: inline-block;
+      width: 150px;
+      height: 160px;
+      line-height: 160px;
+      border-radius: 2px;
+      margin: 35px;
+      &:hover {
+        box-shadow: 0 0 5px #42b983;
+      }
+      a {
+        color: #fff !important;
+        display: block;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/example/parent-child/child.vue b/src/components/example/parent-child/child.vue
index bfc9ef9a8d692aa17fd92cd7e7cad99a6a9a145a..eb75998271704d32c5cee859b5629c2b94d6519c 100755
--- a/src/components/example/parent-child/child.vue
+++ b/src/components/example/parent-child/child.vue
@@ -19,11 +19,19 @@
       }
     },
     props: {
-      msg: String
+      msg: String,
+      putArr: {
+        type: Array,
+        required: true,
+        default: [1, 5]
+      },
+    },
+    mounted: function () {
+      console.log(this.putArr);
     },
     methods: {
       pushDataToParent: function () {
-        this.$emit("getChildrenData", this.childrenData)
+        this.$emit("getChildrenData", 1)
       }
     }
   }
diff --git a/src/components/example/parent-child/parent.vue b/src/components/example/parent-child/parent.vue
index d2cea202b531f61612291350f6ec0bf00d6831d7..d4fdeb5b18ce7b9ff6ffcdab811cda3e201a07e3 100755
--- a/src/components/example/parent-child/parent.vue
+++ b/src/components/example/parent-child/parent.vue
@@ -1,7 +1,13 @@
 <template>
   <div>
     <h1> 父组件向子组件通信 </h1>
-    <child :msg="message" @getChildrenData="getChildrenData" @increased="increased" @decreased="decreased"></child>
+    <child 
+      :msg="message" 
+      @getChildrenData="count += $event" 
+      @increased="increased" 
+      @decreased="decreased"
+      :putArr="arr"
+    ></child>
     <div>
       <span> {{ count }} </span>
     </div>
@@ -14,16 +20,14 @@
     data: function () {
       return {
         message: "从父组件中传递进来的值",
-        count: 0
+        count: 0,
+        arr: [1, 2, 3, 4, 5]
       }
     },
     components: {
       child,
     },
     methods: {
-      getChildrenData: function (data) {
-        console.log(data);
-      },
       increased: function () {
         return this.count += 1
       },
diff --git a/src/components/features/echarts/echarts.vue b/src/components/features/echarts/echarts.vue
new file mode 100755
index 0000000000000000000000000000000000000000..ea6ef821aaa3a11a34982be2b4783bc2023f73a4
--- /dev/null
+++ b/src/components/features/echarts/echarts.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <h3> 图标的使用 </h3>
+    <v-chart :options="polar"></v-chart>
+  </div>
+</template>
+
+<script>
+import ECharts from 'vue-echarts'
+
+// import ECharts modules manually to reduce bundle size
+import 'echarts/lib/chart/line'
+import 'echarts/lib/component/polar'
+import 'echarts/lib/chart/bar'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/legend'
+
+export default {
+  data: function () {
+    let data = []
+
+    for (let i = 0; i <= 360; i++) {
+        let t = i / 180 * Math.PI
+        let r = Math.sin(2 * t) * Math.cos(2 * t)
+        data.push([r, i])
+    }
+
+    return {
+      polar: {
+        title: {
+          text: '极坐标双数值轴'
+        },
+        legend: {
+          data: ['line']
+        },
+        polar: {
+          center: ['50%', '54%']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        angleAxis: {
+          type: 'value',
+          startAngle: 0
+        },
+        radiusAxis: {
+          min: 0
+        },
+        series: [
+          {
+            coordinateSystem: 'polar',
+            name: 'line',
+            type: 'line',
+            showSymbol: false,
+            data: data
+          }
+        ],
+        animationDuration: 2000
+      }
+    }
+  },
+  components: {
+    'v-chart': ECharts
+  }
+}
+</script>
+
+<style>
+  .echarts {
+    width: 100%;
+    height: 450px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/vue-router/404.vue b/src/components/vue-router/404.vue
new file mode 100755
index 0000000000000000000000000000000000000000..7ade3661c94cb8efaa051d0bc7e647f0696df726
--- /dev/null
+++ b/src/components/vue-router/404.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="page-img">
+    
+  </div>
+</template>
+
+<script>
+  
+</script>
+
+<style lang="stylus">
+  .page-img {
+    width 100%;
+    height 800px;
+    background url('../../assets/images/HTML-404-Error-Page.gif') 50% no-repeat;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/vue-router/Profile.vue b/src/components/vue-router/Profile.vue
new file mode 100755
index 0000000000000000000000000000000000000000..2bdea6207a74565dd8a334a054c908e8ca131251
--- /dev/null
+++ b/src/components/vue-router/Profile.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>profile,这是一个嵌套路由</div>
+</template>
+
+<script>
+  
+</script>
+
+<style lang="stylus">
+  
+</style>
\ No newline at end of file
diff --git a/src/components/vue-router/Router1.vue b/src/components/vue-router/Router1.vue
new file mode 100755
index 0000000000000000000000000000000000000000..43e6431b2f22f61fc2c4a91069878aa98dca23c0
--- /dev/null
+++ b/src/components/vue-router/Router1.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="container">
+    <div class="mar-container">
+      <h3>通过router-link传递参数</h3>
+      <div>
+        <router-link :to="`/show/${page}`"> 传递一个参数，通过router-link </router-link>
+      </div>
+    </div>
+
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>价格表</span>
+        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+      </div>
+      <div v-for="(item, index) in lists" :key="item.id" class="text item" @click="handleDetails(item.id)">
+        <div class="list-block">
+          <div class="list-block-left">
+            <img :src="item.url" alt="">
+          </div>
+          <div class="list-block-right">
+            <p> {{ item.title }} </p>
+            <p> {{ item.sale }} </p>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        page: 50,
+        lists: [
+          { id: 14, title: 'Lace-Up High Top Letter Print Athletic Shoes', sale: '45.33', url: 'https://gloimg.gbtcdn.com/soa/gb/pdm-product-pic/Electronic/2018/03/09/source-img/20180309164914_55346.jpg' },
+          { id: 22, title: 'Ehpro Armor Prime Mod - Black', sale: '54.22', url: 'https://gloimg.gbtcdn.com/soa/gb/pdm-product-pic/Electronic/2018/03/09/source-img/20180309164914_55346.jpg' },
+          { id: 53, title: '测试-gb-60108', sale: '343.22', url: 'https://gloimg.gbtcdn.com/soa/gb/pdm-product-pic/Electronic/2018/03/09/source-img/20180309164914_55346.jpg' },
+          { id: 24, title: '测试-gb-65005', sale: '432.22', url: 'https://gloimg.gbtcdn.com/soa/gb/pdm-product-pic/Electronic/2018/03/09/source-img/20180309164914_55346.jpg' },
+        ]
+      }
+    },
+    methods: {
+      handleDetails (id) {
+        // this.$router.push({ name: 'show', params: { id } })
+        this.$router.push({ path: `/show/${id}` })
+      },
+    },
+  }
+</script>
+
+<style lang="stylus">
+  .container {
+    .mar-container {
+      text-align left;
+      margin 45px 0;
+    }
+    .list-block {
+      box-shadow: 0 0 5px #eeee;
+      margin: 8px 0;
+      display: flex;
+      align-items: center;
+      &:hover {
+        cursor pointer;
+      }
+      .list-block-left {
+        img {
+          width: 140px;
+          height: 140px;
+        }
+      }
+      .list-block-right {
+        p {
+          text-align left;
+          line-height 30px;
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/vue-router/Show.vue b/src/components/vue-router/Show.vue
new file mode 100755
index 0000000000000000000000000000000000000000..50250e2e28b13c0c6bfddef1b5a984ac90aa00ba
--- /dev/null
+++ b/src/components/vue-router/Show.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <h3> 获取传递进来的参数 </h3>
+    <div>
+      params: {{ $route.params.id }}
+      <br />
+    </div>
+    <div>
+      <router-link to="/show/54"> 拥有相同的父路由 </router-link>
+    </div>
+    <div>
+      <h3>嵌套路由的使用</h3>
+      <router-link :to="`/show/${$route.params.id}/profile`">跳转到子路由</router-link>
+      </br>
+      <router-link to="/profile">跳转</router-link>
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    mounted () {
+      console.log(this.$route.params)
+    },
+    // watch: {
+    //   '$route' (to, from) {
+    //     console.log(to.params)
+    //   }
+    // },
+    // 
+    beforeRouteUpdate (to, from, next) {
+      console.log(to.params)
+      next()
+    }
+  }
+</script>
+
+<style>
+  
+</style>
\ No newline at end of file
diff --git a/src/components/vuex/ProductList.vue b/src/components/vuex/ProductList.vue
new file mode 100755
index 0000000000000000000000000000000000000000..34fcf158e6ac9e73e0b353f56ff05f12f4c4059f
--- /dev/null
+++ b/src/components/vuex/ProductList.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="pro-list">
+    <ul>
+      <li 
+        v-for="product in products"
+        :key="product.id">
+        {{ product.title }} - {{ product.prict }}
+        <br>
+        <button
+          :disabled="!product.inventory"
+          @click="addProductToCart(product)">
+          加入购物车
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  computed: mapState({
+    products: state => state.products.all
+  }),
+  methods: mapActions('cart', [
+    'addProductToCart'
+  ])
+  created () {
+    this.$store.dispatch('products/getAllProducts')
+  }
+
+}
+</script>
+
+<style lang="stylus">
+  .pro-list {
+    padding: 30px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/vuex/Shopping.vue b/src/components/vuex/Shopping.vue
new file mode 100755
index 0000000000000000000000000000000000000000..a28f2ffdad7847162866b2c5f623ef3d55214fe0
--- /dev/null
+++ b/src/components/vuex/Shopping.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h1>购物车实例</h1>
+    <p class="mar-p">账号： {{ email }}</p>
+    <hr>
+    <h2>产品</h2>
+    <product-list></product-list>
+    <hr>
+    <shopping-cart></shopping-cart>
+  </div>
+</template>
+
+<script>
+  import { mapState } from 'vuex';
+  import ProductList from './ProductList.vue';
+  import ShoppingCart from './ShoppingCart.vue';
+  export default {
+    computed: mapState({
+        email: state => state.userInfo.email    
+    }),
+    components: {ProductList, ShoppingCart}
+  }
+</script>
+
+<style lang="stylus">
+  .mar-p {
+    margin-bottom: 20px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/vuex/ShoppingCart.vue b/src/components/vuex/ShoppingCart.vue
new file mode 100755
index 0000000000000000000000000000000000000000..fe67f36045c1cca135f03afa14aa5e2ecce2a3b7
--- /dev/null
+++ b/src/components/vuex/ShoppingCart.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="pro-card">
+    <h2>清单</h2>
+    <p v-show="!products.length">
+      <i>请添加商品到购物车</i>
+    </p>
+    <ul>
+      <li
+        v-for="product in products"
+        :key="product.id">
+        {{ product.title }} - {{ product.price }} x {{ product.quantity }}
+      </li>
+    </ul>
+    <p>合计： {{ total }}</p>
+    <p>
+      <button 
+        :disabled="!products.length"
+        @click="checkout(products)">提交</button>
+    </p>
+    <p>提交 {{ checkoutStatus }}</p>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex'
+
+export default {
+  computed: {
+    ...mapState({
+      checkoutStatus: state => state.cart.checkoutStatus
+    }),
+    ...mapGetters('cart', {
+      products: 'cartProducts',
+      total: 'cartTotalPrice'
+    }),
+  }
+}
+</script>
+
+<style lang="stylus">
+  .pro-card {
+    padding: 30px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index af21abced24e6115f5644321fadd841540b59f08..b30c6084cba9db1e4591fcbba5382c659d05a074 100755
--- a/src/main.js
+++ b/src/main.js
@@ -2,10 +2,13 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import store from './store';
+import store from './store/index';
 import App from './App.vue';
 import routes from './router';
 
+import './assets/style/common.styl';
+import './assets/style/element-override.styl';
+
 Vue.config.productionTip = false
 Vue.use(ElementUI)
 Vue.use(VueRouter)
diff --git a/src/router/index.js b/src/router/index.js
index 31dcd6850b6ce94782ce52bb7c45809866a5aeda..cbc4b5966c3418357c7a0a2e08d9f6b41ffda5aa 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,15 +1,57 @@
 
+import Home from '../components/Home.vue';
 import CustomTable from '../components/element-component/CustomTable.vue';
-import exam_parent from '../components/example/parent-child/parent.vue';
+import ExamParent from '../components/example/parent-child/parent.vue';
+import Echarts from '../components/features/echarts/echarts.vue';
+import CustomDrawer from '../components/features/drawer/Example.vue';
+import Router1 from '../components/vue-router/Router1.vue';
+import Show from '../components/vue-router/Show.vue';
+import PageNotFound from '../components/vue-router/404.vue';
+import Profile from '../components/vue-router/Profile.vue';
+import Shopping from '../components/vuex/Shopping.vue';
 
 const routes = [
   { 
     path: '/', 
-    component: CustomTable 
+    component: Home 
   },
   {
     path: '/parent',
-    component: exam_parent
+    component: ExamParent
+  },
+  {
+    path: '/table',
+    component: CustomTable
+  },
+  {
+    path: '/drawer',
+    component: CustomDrawer
+  },
+  {
+    path: '/echarts',
+    component: Echarts
+  },
+  {
+    path: '/routes',
+    component: Router1,
+  },
+  {
+    path: '/show/:id',
+    component: Show,
+    name: 'show',
+    children: [
+      { path: 'profile', component: Profile },
+      { path: '/profile', component: Profile }
+    ]
+  },
+  {
+    path: '/shopping-card',
+    component: Shopping,
+    name: 'shopping',
+  },
+  {
+    path: '*',
+    component: PageNotFound
   }
 ]
 
diff --git a/src/store.js b/src/store.js
deleted file mode 100755
index 705be7b674d85a4022469badfec879173338534a..0000000000000000000000000000000000000000
--- a/src/store.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-
-Vue.use(Vuex);
-
-export default new Vuex.Store({
-    state: {
-        count: 0
-    },
-    mutations: {
-        addCount: state => state.count ++ 
-    }
-})
-
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100755
index 0000000000000000000000000000000000000000..a1759b070da03b3e659edbc106962b4d5780f7d3
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import homeIndex from './modules/homeIndex'
+import cart from './modules/cart'
+import products from './modules/products'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    userInfo: {
+      email: "zongwu@gmail.com"
+    }
+  },
+  modules: {
+    homeIndex,
+    cart,
+    products
+  },
+})
\ No newline at end of file
diff --git a/src/store/modules/cart.js b/src/store/modules/cart.js
new file mode 100755
index 0000000000000000000000000000000000000000..8d597bc3e24f5bf5f5e4c3aba3e080c82e5d766e
--- /dev/null
+++ b/src/store/modules/cart.js
@@ -0,0 +1,25 @@
+import shop from '../../common/api/shop';
+import { CART, PRODUCTS } from '../mutation-types';
+
+const state = {
+  items: [],
+  checkoutStatus: null
+}
+
+const getters = {
+  // cartProducts: (state, getters, rootState) {
+  //   return state.items.map(({}) => {})
+  // }
+}
+
+const actions = {}
+
+const mutations = {}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+}
\ No newline at end of file
diff --git a/src/store/modules/homeIndex.js b/src/store/modules/homeIndex.js
new file mode 100755
index 0000000000000000000000000000000000000000..a2602a0cbe30bcfb02ba54da333b21e9d289b065
--- /dev/null
+++ b/src/store/modules/homeIndex.js
@@ -0,0 +1,18 @@
+const state = {
+  navList: [
+    {id: 1, url: '/parent', label: '组件通信' },
+    {id: 2, url: '/table', label: 'Element Table' },
+    {id: 3, url: '/drawer', label: '侧边弹出层' },
+    {id: 4, url: '/echarts', label: '图表' }
+  ]
+}
+
+const mutations = {}
+
+const actions = {}
+
+export default {
+  state,
+  mutations,
+  actions,
+}
diff --git a/src/store/modules/products.js b/src/store/modules/products.js
new file mode 100755
index 0000000000000000000000000000000000000000..e651fb73f6906aec60c8cce7b305684d82d76f7c
--- /dev/null
+++ b/src/store/modules/products.js
@@ -0,0 +1,28 @@
+import shop from '../../common/api/shop';
+import { PRODUCTS } from '../mutation-types';
+const state = {
+  all: [] 
+}
+
+const getters = {}
+
+const actions = {
+  getAllProducts ({commit}) {
+    shop.getProducts(products => commit(PRODUCTS.SET_PRODUCTS, products) )
+  }
+}
+
+const mutations = {
+  [PRODUCTS.SET_PRODUCTS] (state, products) {
+    state.all = products
+  }
+}
+
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+}
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
new file mode 100755
index 0000000000000000000000000000000000000000..24a4ab934c16e4544e349f5c687a1b26dd3c5817
--- /dev/null
+++ b/src/store/mutation-types.js
@@ -0,0 +1,8 @@
+export const CART = {
+  PUSH_RPODUCT_TO_CART: 'pushProductToCart',
+  SETCHECKOUTSTATUS: 'setCheckoutStatus',
+}
+
+export const PRODUCTS = {
+  SET_PRODUCTS: 'setProducts',
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 3ba37a257029394e6c349b9d5f14a6575554ca1f..496ffb243663a8bea71e78e6c506ef1f6c9a9408 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2357,6 +2357,11 @@ css-loader@^1.0.1:
     postcss-value-parser "^3.3.0"
     source-list-map "^2.0.0"
 
+css-parse@1.7.x:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
+  integrity sha1-Mh9s9zeCpv91ERE5D8BeLGV9jJs=
+
 css-select-base-adapter@^0.1.1:
   version "0.1.1"
   resolved "http://registry.npm.taobao.org/css-select-base-adapter/download/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
@@ -2529,6 +2534,13 @@ de-indent@^1.0.2:
   resolved "http://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
 
+debug@*, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+  version "4.1.1"
+  resolved "http://registry.npm.taobao.org/debug/download/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha1-O3ImAlUQnGtYnO4FDx1RYTlmR5E=
+  dependencies:
+    ms "^2.1.1"
+
 debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "http://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -2543,13 +2555,6 @@ debug@^3.1.0, debug@^3.2.5, debug@^3.2.6:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
-  version "4.1.1"
-  resolved "http://registry.npm.taobao.org/debug/download/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
-  integrity sha1-O3ImAlUQnGtYnO4FDx1RYTlmR5E=
-  dependencies:
-    ms "^2.1.1"
-
 decamelize@^2.0.0:
   version "2.0.0"
   resolved "http://registry.npm.taobao.org/decamelize/download/decamelize-2.0.0.tgz#656d7bbc8094c4c788ea53c5840908c9c7d063c7"
@@ -2832,6 +2837,13 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.2.1.tgz#9a8ea3b03354f86f824d97625c334cf16965ef03"
+  integrity sha512-pw4xScRPsLegD/cqEcoXRKeA2SD4+s+Kyo0Na166NamOWhzNl2yI5RZ2rE97tBlAopNmhyMeBVpAeD5qb+ee1A==
+  dependencies:
+    zrender "4.0.7"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -3701,6 +3713,18 @@ glob-to-regexp@^0.3.0:
   resolved "http://registry.npm.taobao.org/glob-to-regexp/download/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
+glob@7.0.x:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
+  integrity sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@^5.0.15:
   version "5.0.15"
   resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
@@ -4782,6 +4806,11 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
+
 lodash.defaultsdeep@^4.6.0:
   version "4.6.0"
   resolved "http://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.0.tgz#bec1024f85b1bd96cbea405b23c14ad6443a6f81"
@@ -6570,6 +6599,11 @@ requires-port@^1.0.0:
   resolved "http://registry.npm.taobao.org/requires-port/download/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+resize-detector@^0.1.9:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/resize-detector/-/resize-detector-0.1.10.tgz#1da3f961aa5f914ccbcfd3752d52fd45beeb692c"
+  integrity sha512-iLcXC8A6Fb0DfA+TRiywrK/0A22bFqkhntjMJMEzXDA4XkcEkfwpNbv7W8iewUiD0xYIaeiXOfiEehTqGKsUFw==
+
 resize-observer-polyfill@^1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
@@ -6697,6 +6731,11 @@ safe-regex@^1.1.0:
   resolved "http://registry.npm.taobao.org/safer-buffer/download/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=
 
+sax@0.5.x:
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
+  integrity sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE=
+
 sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "http://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -6965,6 +7004,13 @@ source-map-url@^0.4.0:
   resolved "http://registry.npm.taobao.org/source-map-url/download/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
   integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
+source-map@0.1.x:
+  version "0.1.43"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
+  integrity sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=
+  dependencies:
+    amdefine ">=0.0.4"
+
 source-map@^0.4.2:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
@@ -7240,6 +7286,27 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylus-loader@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-3.0.2.tgz#27a706420b05a38e038e7cacb153578d450513c6"
+  integrity sha512-+VomPdZ6a0razP+zinir61yZgpw2NfljeSsdUF5kJuEzlo3khXhY19Fn6l8QQz1GRJGtMCo8nG5C04ePyV7SUA==
+  dependencies:
+    loader-utils "^1.0.2"
+    lodash.clonedeep "^4.5.0"
+    when "~3.6.x"
+
+stylus@^0.54.5:
+  version "0.54.5"
+  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.5.tgz#42b9560931ca7090ce8515a798ba9e6aa3d6dc79"
+  integrity sha1-QrlWCTHKcJDOhRWnmLqeaqPW3Hk=
+  dependencies:
+    css-parse "1.7.x"
+    debug "*"
+    glob "7.0.x"
+    mkdirp "0.5.x"
+    sax "0.5.x"
+    source-map "0.1.x"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "http://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -7742,6 +7809,14 @@ vue-drawer@^0.1.0:
     vue "^1.0.26"
     vue-touch "^1.1.0"
 
+vue-echarts@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/vue-echarts/-/vue-echarts-4.0.1.tgz#3d3a14f53119701bba09545a68b17cf0689cad29"
+  integrity sha512-JgvIcr/btz4bAkafVm0aLyfkAdhGf2T8VIdESd2264Mlr5w0dZ0IOG3BJCvtznIlBJMiwQXAztc27Y3KGKdF5Q==
+  dependencies:
+    lodash "^4.17.11"
+    resize-detector "^0.1.9"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "http://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
@@ -7994,6 +8069,11 @@ websocket-extensions@>=0.1.1:
   resolved "http://registry.npm.taobao.org/websocket-extensions/download/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
   integrity sha1-XS/yKXcAPsaHpLhwc9+7rBRszyk=
 
+when@~3.6.x:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/when/-/when-3.6.4.tgz#473b517ec159e2b85005497a13983f095412e34e"
+  integrity sha1-RztRfsFZ4rhQBUl6E5g/CVQS404=
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "http://registry.npm.taobao.org/which-module/download/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
@@ -8118,3 +8198,8 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zrender@4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.0.7.tgz#15ae960822f5efed410995d37e5107fe3de10e6d"
+  integrity sha512-TNloHe0ums6zxbHfnaCryM61J4IWDajZwNq6dHk9vfWhhysO/OeFvvR0drBs/nbXha2YxSzfQj2FiCd6RVBe+Q==