vue-cli3示例项目开发(导入即可)

  1. 项目git地址:https://github.com/chanlzl/vue-mall-test.git
  2. 项目演示:
  3. 页面布局:
    根据页面设计进行布局:
    vue-cli3示例项目开发(导入即可)_第1张图片
  4. 在views目录下增加主页面vue或使用APP.vue,并根据布局进行模块划分:
    vue-cli3示例项目开发(导入即可)_第2张图片
    添加路由:vue-cli3示例项目开发(导入即可)_第3张图片
    vue-cli3示例项目开发(导入即可)_第4张图片
    对样式进行设置:
    vue-cli3示例项目开发(导入即可)_第5张图片
  5. 添加left组件:
    vue-cli3示例项目开发(导入即可)_第6张图片
    在主页面引用该组件:
    vue-cli3示例项目开发(导入即可)_第7张图片
    vue-cli3示例项目开发(导入即可)_第8张图片
    vue-cli3示例项目开发(导入即可)_第9张图片
  6. 添加事件总线(参数传递)vue-cli3示例项目开发(导入即可)_第10张图片
    添加right组件(具体内容先不用着急):vue-cli3示例项目开发(导入即可)_第11张图片同left组件,引入主页面:vue-cli3示例项目开发(导入即可)_第12张图片vue-cli3示例项目开发(导入即可)_第13张图片
  7. .给left组件添加事件,通过事件总线进行传值:vue-cli3示例项目开发(导入即可)_第14张图片
    vue-cli3示例项目开发(导入即可)_第15张图片
  8. .right组件通过事件总线取值:vue-cli3示例项目开发(导入即可)_第16张图片
    将商品列表组件引入right页面:vue-cli3示例项目开发(导入即可)_第17张图片vue-cli3示例项目开发(导入即可)_第18张图片
  9. 添加商品列表组件:
    根据right组件传过来的不同值获取不同的商品数据:vue-cli3示例项目开发(导入即可)_第19张图片
    vue-cli3示例项目开发(导入即可)_第20张图片循环遍历数据:vue-cli3示例项目开发(导入即可)_第21张图片
  10. 启动项目:

你可能感兴趣的:(前端)