vue+element简单实现商城网站首页，模仿小米电商商城（二）

1.本案例灵感来源于小米官网 https://www.mi.com/

2.本文在上一篇文章的基础上增加了下级菜单和商品详情页 源码

上一篇： vue+element简单实现商城网站首页，模仿小米电商商城（一）

官方截图：

 

产品demo效果图：

首页：

二级菜单：

 

 商品详情页：

3.首先创建vue项目，采用开发工具Hbuilder。vue创建项目教程可参考：（一）Vue——如何创建一个Vue项目(完整步骤) - 㭌（mou）七 - 博客园

4.创建项目后安装elementui，按照官方教程即可，elementui官方地址：Element - The world's most popular Vue UI framework

   创建好的项目目录结构大概这样子：

 

5.整个框架布局分为头部 src/page/top、内容src/page/index和底部src/page/foot。

内容src/page/index为一个共用容器，就像iframe标签一样，所有的路径访问将会显示在容器中，页面跳转的路径定义在src/router/index.js中

6.头部源码