小米商城实战vue项目 02

这一章：

我们根据菜单来开发子菜单的首页父组件  

在views中创建；

这个就是大体的框架；

Home.vue

<!--
 * @Description: 首页组件
 * @Author: 
 * @Date: 2020-04-07 16:23:00
 * @LastEditors: 
 * @LastEditTime: 
 -->

 <template>
 <div class="home" name="home">
     <!-- 轮播图 -->
     <div>
         <el-carousel>
         <el-carousel-item>    
         </el-carousel-item>
         </el-carousel>
     </div>
    <!-- 轮播图END -->

    <div class="main-box">
        <div class="main">
       
         <!-- 手机商品展示区域 -->   
        <div class="phone">
        </div>
        <!-- 手机商品展示区域END -->

        <!-- 家电商品展示区域 -->
        <div class="appliance">
        </div>
        <!-- 家电商品展示区域END -->

        <!-- 配件商品展示区域 -->
        <div class="accessory">
        </div>
        <!-- 配件商品展示区域END -->

        </div>
    </div> 
</div>
 </template>

 <script>
     export default{

     }
 </script>

 <<style scoped>
 
 </style>

需要配置路由，接着就是按照这种样式，添加父组件，便好；

router/index.js

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)
/*
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
*/

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  
]

const router = new Router({
  // base: '/dist',
  // mode: 'history',
  routes
})

export default router

针对于这个Home.vue 父组件，我们可以在components文件夹中子组件，然后父组件可以传值和调用子组件的模板等等；；

以上我写的是一个整体的一点点个人的构思和理解；

我们接着在下一章从头讲起；；