源码https://download.csdn.net/download/lucky_fang/85193781

官方案例截图

产品效果图：

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

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

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

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

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

5.src/page/top/index.vue

<template><div style="font-size: 14px;"><div style="display: flex;height: 40px;padding: 0 400px;background-color: #f5f5f5;"><div class="top-title" style="padding-right: 20px;line-height: 40px;color: #666;">嗨，欢迎来到<span style="color: #b31e22;">XXX</span></div><div class="top-title" style="padding-right: 20px;line-height: 40px;color: #666;margin-left: 20px;">网店代销</div><div class="top-title" style="padding-right: 20px;line-height: 40px;color: #666;margin-left: 20px;">帮助中心</div><div style="flex: 1;display: flex;"><div style="flex: 1;"></div><div style="width: 300px;display: flex;"><el-button type="text" style="color: #666;" class="top-title">登录</el-button><el-button type="text" style="color: #666;margin-right: 10px;" class="top-title">注册</el-button><el-button type="text" style="color: #666;margin-right: 10px;" class="top-title">我的U袋</el-button><el-button type="text" style="color: #666;margin-right: 10px;" class="top-title">我的订单</el-button><el-button type="text" style="color: #666;margin-right: 10px;" class="top-title">积分平台</el-button></div></div></div><div style="margin: 0 400px;height: 100px;line-height: 100px;"><div style="display: flex;"><div style="width: 200px;height: 100px;"><img src="../../../public/img/logo.jpg" style="cursor: pointer;width: 200px;height: 100px;"></div><div style="flex: 1;text-align: center;padding: 0 50px;"><el-input placeholder="Ta们都在搜XXX" v-model="input" style="width: 100%;margin-top: 30px;"><el-button slot="append" icon="el-icon-search"></el-button></el-input></div><div style="width: 200px;text-align: center;"><el-button type="warning" icon="el-icon-shopping-cart-2" plain>购物车 0 件</el-button></div></div></div></div>
</template><script>export default {data() {return {input:''};},mounted() {},methods: {homePage(){this.$router.push({path: '/home/index'});},}};
</script><style>.top-title:hover{cursor: pointer;color: #b31e22!important;}.el-input-group__append, .el-input-group__prepend{background-color: #b31e22!important;color: #ffffff!important;}
</style>

6.src/page/index/index.vue

<template><div id="body" style="width: 100%;height: 100%;overflow: auto;"><top></top><router-view></router-view><foot></foot></div>
</template><script>import top from "../top/index.vue";import foot from "../foot/index";export default {components: {top,foot},name: "index",data() {return {};},mounted() {},methods: {}};
</script><style>#body{background-size: 100% 100%;background-repeat: no-repeat;}
</style>

7.src/page/foot/index.vue

<template><div style="font-size: 14px;"><div style="margin: 50px 400px 50px 400px;"><div style="display: flex;"><div style="flex: 1;display: flex;"><div style=""><div class="foot-title">帮助中心</div><div class="foot-item">账户管理</div><div class="foot-item">购物指南</div><div class="foot-item">订单操作</div></div><div style="margin-left: 100px;"><div class="foot-title">服务支持</div><div class="foot-item">账户管理</div><div class="foot-item">购物指南</div><div class="foot-item">订单操作</div></div><div style="margin-left: 100px;"><div class="foot-title">线下门店</div><div class="foot-item">账户管理</div><div class="foot-item">购物指南</div><div class="foot-item">订单操作</div></div><div style="margin-left: 100px;"><div class="foot-title">支付方式</div><div class="foot-item">账户管理</div><div class="foot-item">购物指南</div><div class="foot-item">订单操作</div></div></div><div style="width: 250px;border-left: 1px solid #dfdfdf;text-align: center;"><div style="color: #19b4ea;font-weight: bold;font-size: 18px;line-height: 40px;">000-123456789</div><div style="color: gray;">周一至周日8:00~18:00</div><div style="color: gray;margin-bottom: 10px;">（节假日不休）</div><el-button type="success" round icon="el-icon-headset">24小时客服在线</el-button></div></div></div><div style="background-color: #19b4ea;height: 40px;text-align: center;line-height: 40px;color: #FFFFFF;">申明：本网页仅供学习参考 @XXX XXX XXX</div></div></template><script>
</script><style>.foot-title{height: 40px;line-height: 40px;}.foot-item{height: 25px;line-height: 25px;color: gray;}.foot-item:hover{cursor: pointer;color: #e37a2f;}
</style>

8.源码

衣服、商品、商城网站模板首页，仿U袋网，vue+elementui简洁实现相关推荐

衣服、商品、商城网站模板首页，仿U袋网，vue+elementui简洁实现（二）
一.前言项目演示地址:可私聊作者获取(演示地址不定时变化) 接上一遍博客:<衣服.商品.商城网站模板首页,仿U袋网,vue+elementui简洁实现> 注意: 上一遍博客里面的源码下载 ...
仿京东商城html5模版,html5仿京东手机WAP商城网站模板
[实例简介] html5仿京东手机商城网站模板_wap京东手机购物网站模板下载 [实例截图] [核心代码] 9fc4db22-b015-4b00-8188-53007c5acbf6 ├── cart ...
【web素材】07—仿京东，小米，锤子，华为等20+套商城网站模板
素材整理 | 杨小爱在之前,我跟大家分享过很多web素材的学习资源,我做这个栏目的目的,就是希望我们可以通过看别人的项目代码,然后去比较自己的代码,这些素材资源,也是我自己在做项目的时候,收集整理积 ...
div+css静态网页设计电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板文章目录 HTML5期末大作业:电商购物网站设计- ...
HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板常见网页设计作业题材有个人. 美食. 公司. 学 ...
网页成品——手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品
HTML5期末大作业:手表商城网站设计--手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
HTML5期末大作业：手表商城网站设计——手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品
HTML5期末大作业:手表商城网站设计--手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
ecshop红色风格婚纱摄影婚庆公司商城网站模板 GBK+UTF8版本网盘下载
ecshop红色风格婚纱摄影婚庆公司商城网站模板 GBK+UTF8版本文件:590m.com/f/25127180-486122316-56ab8c (访问密码:551685) 以下内容无关: -- ...
仿蘑菇街，京东，苏宁易购，海尔商城等33套大气购物商城网站模板，附源码免费下载地址...
来源 | web前端开发在很早之前,跟大家分享过很多有关于网站模板的素材资源,有企业网站,也有购物商城,还有后台管理模板,以及大数据页面模板等等. 今天我们再跟大家分享32套商城网站源码,有的是比较 ...

衣服、商品、商城网站模板首页，仿U袋网，vue+elementui简洁实现

1.本案例灵感来源于网络

源码https://download.csdn.net/download/lucky_fang/85193781

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

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

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

5.src/page/top/index.vue

6.src/page/index/index.vue

7.src/page/foot/index.vue

8.源码

衣服、商品、商城网站模板首页，仿U袋网，vue+elementui简洁实现相关推荐

最新文章

热门文章