vue+element简单实现商城网站首页,模仿小米电商商城(一)

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

源码

官方截图

vue+element简单实现商城网站首页,模仿小米电商商城(一)_第1张图片

vue+element简单实现商城网站首页,模仿小米电商商城(一)_第2张图片

 产品效果图:

二级菜单、产品详情

vue+element简单实现商城网站首页,模仿小米电商商城(一)_第3张图片

 vue+element简单实现商城网站首页,模仿小米电商商城(一)_第4张图片

 购物车

vue+element简单实现商城网站首页,模仿小米电商商城(一)_第5张图片

 

 

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

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

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

vue+element简单实现商城网站首页,模仿小米电商商城(一)_第6张图片

 vue+element简单实现商城网站首页,模仿小米电商商城(一)_第7张图片

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

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

vue+element简单实现商城网站首页,模仿小米电商商城(一)_第8张图片

5.src/page/top/index.vue






6.src/page/index/index.vue






7.src/page/foot/index.vue






8.源码

你可能感兴趣的:(前端开发它不香么,html5,vue.js,前端,elementui,web)