项目演示地址
http://sph.atguigu.cn/
项目资料参考网址
- https://blog.csdn.net/drhrht/article/details/126080428
- https://blog.csdn.net/a924382407/article/details/129881205
单页面应用
-
分为3层
-
结构层(template)
-
样式层(style)
-
行为层(script)
-
-
入口文件
main.js:程序最开始执行的文件 -
babel:就是
翻译官,比如ES6语法转换成ES5语法
脚手架使用
- 命令行创建项目: vue create 项目名称
- node_modules:放置项目依赖的地方
- public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面
- src：开发者源代码文件夹
- assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）
- components文件夹:一般放置非路由组件（或者项目共用的组件）
- App.vue 唯一的根组件
- main.js 入口文件【程序最先执行的文件】
- babel.config.js:babel配置文件(翻译官)
- package.json：看到项目描述、项目依赖、项目运行指令(项目身份证)
- README.md:项目说明文件
- 常用的
项目配置项
- 浏览器自动打开:
- 在package.json文件配置
"scripts": {
"serve": "vue-cli-service serve --open", // 添加 --open参数
"build": "vue-cli-service build",
"lint": "vue-cli-service lint" // 新增
},
- 在 vue.config.js文件添加配置(如果不添加host地址,默认跳转到0.0.0.0:8080)
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: { // 新增配置
open: true,
host: 'localhost',
port: 8080
}
})
- 关闭eslint校验工具
// vue.config.js
module.exports = {
lintOnSave:false,
}
3.3 src文件夹的别名的设置
因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些
创建jsconfig.json文件
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}
项目路由分析
- 前端所谓路由: KV键值对
- key: URL路径
- value: 相应的路由组件
-
插件: vue-router
-
index路由分析
- 确定项目结构顺序:上/中/下,只有中间部分的V在发生变化，中间部分应该使用的是路由组件
- 中间路由组件又分为: Home路由组件 && Search路由组件
- 2个非路由组件|四个路由组件
- 两个非路由组件：Header 、Footer
- 路由组件:Home、Search、Login（没有底部的Footer组件，带有二维码的）、Register（没有底部的Footer组件，带二维码的）
搞定非路由组件(Header && Footer),整合静态页面
- 组件应由
代码+图片资源组成
- Header
- index.vue
- images目录
- logo.png
components目录新建Header目录,新建index.vue和images目录(需要的图片资源丢进去)
### index.vue
<template>
<!-- 头部 -->
<header class="header">
<!-- 头部的第一行 -->
<div class="top">
<div class="container">
<div class="loginList">
<p>尚品汇欢迎您！</p>
<!-- 没有用户名：未登录 -->
<p v-if="!userName">
<span>请</span>
<router-link to="/login">登录</router-link>
<router-link to="/register" class="register">免费注册</router-link>
</p>
<!-- 登录了 -->
<p v-else>
<a>{{ userName }}</a>
<a class="register" @click="logout" href="javascript:void(0)">退出登录</a>
</p>
</div>
<div class="typeList">
<router-link to="/center/myOrder">我的订单</router-link>
<router-link to="/shopcart">我的购物车</router-link>
<a href="javascript:void(0)">我的尚品汇</a>
<a href="javascript:void(0)">尚品汇会员</a>
<a href="javascript:void(0)">企业采购</a>
<a href="javascript:void(0)">关注尚品汇</a>
<a href="javascript:void(0)">合作招商</a>
<a href="http://localhost:8080/#/login">商家后台</a>
</div>
</div>
</div>
<!--头部第二行 搜索区域-->
<div class="bottom">
<h1 class="logoArea">
<router-link class="logo" to="/home">
<img src="./images/logo.png" alt="" />
</router-link>
</h1>
<div class="searchArea">
<form action="javascript:void(0)" class="searchForm">
<input type="text" id="autocomplete" class="input-error input-xxlarge" v-model="keyword" />
<button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">
搜索
</button>
</form>
</div>
</div>
</header>
</template>
- 组件页面的样式使用的是
less样式，浏览器不识别该样式，需要下载相关依赖
- npm install --save less less-loader@5 # 建议安装版本5、版本太新可能报错
- <script scoped lang="less"> # 如果想让组件识别less样式，则在组件中设置
<style lang="less" scoped>
.header {
&>.top {
background-color: #eaeaea;
height: 30px;
line-height: 30px;
.container {
width: 1200px;
margin: 0 auto;
overflow: hidden;
.loginList {
float: left;
p {
float: left;
margin-right: 10px;
.register {
border-left: 1px solid #b3aeae;
padding: 0 5px;
margin-left: 5px;
}
}
}
.typeList {
float: right;
a {
padding: 0 10px;
&+a {
border-left: 1px solid #b3aeae;
}
}
}
}
}
&>.bottom {
width: 1200px;
margin: 0 auto;
overflow: hidden;
.logoArea {
float: left;
.logo {
img {
width: 175px;
margin: 25px 45px;
}
}
}
.searchArea {
float: right;
margin-top: 35px;
.searchForm {
overflow: hidden;
input {
box-sizing: border-box;
width: 490px;
height: 32px;
padding: 0px 4px;
border: 2px solid #ea4a36;
float: left;
&:focus {
outline: none;
}
}
button {
height: 32px;
width: 68px;
background-color: #ea4a36;
border: none;
color: #fff;
float: left;
cursor: pointer;
&:focus {
outline: none;
}
}
}
}
}
}
</style>
- 碰到
Header样式错乱的问题,我们在index.html中引入reset.css修复这个问题
<!DOCTYPE html>
<html lang="">
<head>
......
<!--引入reset.css,该文件和index.html同一目录-->
<link rel="stylesheet" type="text/css" href="./reset.css"/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
......
</body>
</html>
- 同样的方式,搞定
Footer组件(images目录丢图片进去)
### Footer.index.vue
<template>
<!-- template中书写组建的结构-->
<div class="footer">
<div class="footer-container">
<div class="footerList">
<div class="footerItem">
<h4>购物指南</h4>
<ul class="footerItemCon">
<li>购物流程</li>
<li>会员介绍</li>
<li>生活旅行/团购</li>
<li>常见问题</li>
<li>购物指南</li>
</ul>
</div>
<div class="footerItem">
<h4>配送方式</h4>
<ul class="footerItemCon">
<li>上门自提</li>
<li>211限时达</li>
<li>配送服务查询</li>
<li>配送费收取标准</li>
<li>海外配送</li>
</ul>
</div>
<div class="footerItem">
<h4>支付方式</h4>
<ul class="footerItemCon">
<li>货到付款</li>
<li>在线支付</li>
<li>分期付款</li>
<li>邮局汇款</li>
<li>公司转账</li>
</ul>
</div>
<div class="footerItem">
<h4>售后服务</h4>
<ul class="footerItemCon">
<li>售后政策</li>
<li>价格保护</li>
<li>退款说明</li>
<li>返修/退换货</li>
<li>取消订单</li>
</ul>
</div>
<div class="footerItem">
<h4>特色服务</h4>
<ul class="footerItemCon">
<li>夺宝岛</li>
<li>DIY装机</li>
<li>延保服务</li>
<li>尚品汇E卡</li>
<li>尚品汇通信</li>
</ul>
</div>
<div class="footerItem">
<h4>帮助中心</h4>
<img src="./images/wx_cz.jpg"/>
</div>
</div>
<div class="copyright">
<ul class="helpLink">
<li>
关于我们
<span class="space"></span>
</li>
<li>
联系我们
<span class="space"></span>
</li>
<li>
关于我们
<span class="space"></span>
</li>
<li>
商家入驻
<span class="space"></span>
</li>
<li>
营销中心
<span class="space"></span>
</li>
<li>
友情链接
<span class="space"></span>
</li>
<li>
关于我们
<span class="space"></span>
</li>
<li>
营销中心
<span class="space"></span>
</li>
<li>
友情链接
<span class="space"></span>
</li>
<li>关于我们</li>
</ul>
<p>地址：北京市昌平区宏福科技园综合楼6层</p>
<p>京ICP备19006430号</p>
</div>
</div>
</div>
</template>
<script>
// script中书写组件交互相关的代码(数据、方法等)
export default {
name: "index"
}
</script>
<style lang="less" scoped>
/*style书写组建的样式*/
.footer {
background-color: #eaeaea;
.footer-container {
width: 1200px;
margin: 0 auto;
padding: 0 15px;
.footerList {
padding: 20px;
border-bottom: 1px solid #e4e1e1;
border-top: 1px solid #e4e1e1;
overflow: hidden;
padding-left: 40px;
.footerItem {
width: 16.6666667%;
float: left;
h4 {
font-size: 14px;
}
.footerItemCon {
li {
line-height: 18px;
}
}
&:last-child img {
width: 121px;
}
}
}
.copyright {
padding: 20px;
.helpLink {
text-align: center;
li {
display: inline;
.space {
border-left: 1px solid #666;
width: 1px;
height: 13px;
background: #666;
margin: 8px 10px;
}
}
}
p {
margin: 10px 0;
text-align: center;
}
}
}
}
</style>
App注册
### App.vue
<template>
<div id="app">
<Header></Header>
<Footer></Footer>
</div>
</template>
<script type="text/javascript">
import Header from './components/Header'
import Footer from './components/Footer'
export default {
name:'App',
components:{
Header,
Footer
}
}
</script>
<style>
</style>
路由组件
- 新建
app项目以后,默认的router是这样的
### router.index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{ // 普通写法
path: '/',
name: 'home',
component: HomeView
},
{// component value 还可以是箭头函数.返回import...
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = new VueRouter({
routes
})
export default router
- 项目的目录结构为:
### router.index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/pages/Home'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
import Search from '@/pages/Search'
Vue.use(VueRouter)
export default new VueRouter({
routes:[
{ // 项目跑起来,自动跳转到home页
path:"*",
redirect:"/home"
},
{
path:"/home",
component:Home
},
{
name:"search", // 按钮跳转使用 $router.push(),必须取名
path:"/search",
component:Search
},
{
path:"/login",
component:Login
},
{
path:"/register",
component:Register
},
]
})
### App.vue
<template>
<div id="app">
<Header></Header>
<!--展示区-->
<router-view></router-view>
<Footer></Footer>
</div>
</template>
### 各个组件先简单写(其余组件类同)
<template>
<div id="">
<h1>我是Search组件的内容</h1>
</div>
</template>
<script>
export default {
name:'Search'
}
</script>
<style>
</style>
Header组件各种跳转
### Header.vue
......
<router-link to="/login">登录</router-link>
<router-link to="/register" class="register">免费注册</router-link>
......
<h1 class="logoArea">
<router-link class="logo" to="/home">
<img src="./images/logo.png" alt="" />
</router-link>
</h1>
......
<button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">
......
<script>
export default {
name:'index',
data(){
return {
keyword:'' // 搜索框收集用户输入
}
},
methods:{
goSearch(){
this.$router.push({ // 点完跳转到Search组件
name:'search'
})
}
}
}
</script>
$router.push()点击多次引发的vue warn问题
### Header.vue
......
methods:{
goSearch(){
this.$router.push({
name:'search',
params:{keyword:this.keyword},
query:{k:this.keyword.toUpperCase()}
})
}
}
- 当页面的'搜索'按钮点击多次的时候,就会出现 vue warn警告,虽然不影响程序正常运行,但毕竟不爽...
...Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/search?k=KING".
- 使用'router-link'不会有这种问题,因为底层已经处理好了
- 解决办法,push(配置对象,成功函数,失败回调函数),即传入两个回调函数即可解决这个问题
......
methods:{
goSearch(){
this.$router.push({
name:'search',
params:{keyword:this.keyword},
query:{k:this.keyword.toUpperCase()}
},()=>{},()=>{}) // 增加这两个回调
}
}
- 如果想忽略警告,每次都这么写,会显得很麻烦,最好的解决办法是重写push方法,彻底解决问题
- $router.push()的返回值是一个 Promise 对象,即
function push(){
return new Promise((resolve,reject)=>{......})
}
### router.index.js 重写 push()和replace()方法
......
import VueRouter from 'vue-router'
......
Vue.use(VueRouter)
let originPush = VueRouter.prototype.push; // 先保存原来的方法(之后的逻辑不清楚)
VueRouter.prototype.push = function (location,resolve,reject) {
if (resolve && reject) {
originPush.call(this,location,resolve,reject)
}else{
originPush.call(this,location,()=>{},()=>{})
}
}
let originReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function (location,resolve,reject) {
if (resolve && reject) {
originReplace.call(this,location,resolve,reject)
}else{
originReplace.call(this,location,()=>{},()=>{})
}
}
- 路由跳转的两种模式
- 声明式导航（router-link：务必要有to属性）
- 编程式导航push||replace
- 编程式导航更好用：因为可以书写自己的业务逻辑('警告项'可以重写)
- 实现功能:
只要路由切换到Home组件或者 Search组件才展示Footer组件
### App.vue(根据path值去判定)
<template>
<div id="app">
<Header></Header>
<router-view></router-view>
<Footer v-show="$route.path === '/home' || $route.path === '/search'"></Footer>
</div>
</template>
- 这种写法可行,但是一旦路由很多的时候,写起来就非常麻烦
- 解决办法: 使用路由的 meta 配置项,自定义字段来判断逻辑
### router.index.js
......
export default new VueRouter({
routes:[
......
{
path:"/home",
component:Home,
meta:{show:true} // 新增配置项,下同
},
{
name:"search",
path:"/search",
component:Search,
meta:{show:true}
},
......
]
})
### App.vue
......
<!-- <Footer v-show="$route.path === '/home' || $route.path === '/search'"></Footer> -->
<Footer v-show="$route.meta.show"></Footer>
Header组件给Search组件传参示例
### Header.vue
......
methods:{
goSearch(){
this.$router.push({
name:'search',
params:{keyword:this.keyword}, // 传两种参数
query:{k:this.keyword.toUpperCase()}
})
}
}
### Search.vue
......
<template>
<div id="">
<h1>我是Search组件的内容</h1>
<h1>我收到的参数是: {{$route.params.keyword}}</h1> <!--接收 param-->
<h1>我收到的查询字符串参数是: {{$route.query.k}}</h1> <!--接收 query-->
</div>
</template>
把三级联动注册为全局组件(多个组件需要用到,Home,Search,Detail)
- 先搞定
三级联动的结构,样式,图片(本例中,没有图片)
### pages/Home/TypeNav.index.vue
<template>
<!-- 商品分类导航 -->
<div class="type-nav">
<div class="container">
<h2 class="all">全部商品分类</h2>
<nav class="nav">
<a href="###">服装城</a>
<a href="###">美妆馆</a>
<a href="###">尚品汇超市</a>
<a href="###">全球购</a>
<a href="###">闪购</a>
<a href="###">团购</a>
<a href="###">有趣</a>
<a href="###">秒杀</a>
</nav>
<div class="sort">
<div class="all-sort-list2">
<div class="item bo">
<h3>
<a href="">图书、音像、数字商品</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书</a>
</dt>
<dd>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">家用电器</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书1</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">手机、数码、充值</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">充值</a>
</dt>
<dd>
<em>
<a href="recharge.html">充值</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">电子书2</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">电脑、办公</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书3</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>教育</dt>
<dd>
<em>
<a href="">教材教辅</a>
</em>
<em>
<a href="">考试</a>
</em>
<em>
<a href="">外语学习</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>其它</dt>
<dd>
<em>
<a href="">英文原版书</a>
</em>
<em>
<a href="">港台图书</a>
</em>
<em>
<a href="">工具书</a>
</em>
<em>
<a href="">套装书</a>
</em>
<em>
<a href="">杂志/期刊</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">家居、家具、家装、厨具</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书4</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">服饰内衣</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书5</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">个护化妆</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书6</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>教育</dt>
<dd>
<em>
<a href="">教材教辅</a>
</em>
<em>
<a href="">考试</a>
</em>
<em>
<a href="">外语学习</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>其它</dt>
<dd>
<em>
<a href="">英文原版书</a>
</em>
<em>
<a href="">港台图书</a>
</em>
<em>
<a href="">工具书</a>
</em>
<em>
<a href="">套装书</a>
</em>
<em>
<a href="">杂志/期刊</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">运动健康</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书7</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">汽车用品</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书8</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">彩票、旅行</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">理财、众筹</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">母婴、玩具</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">箱包</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">运动户外</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">箱包</a>
</h3>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default { // 导出
name:'TypeNav'
}
</script>
<style lang="less" scoped>
.type-nav {
border-bottom: 2px solid #e1251b;
.container {
width: 1200px;
margin: 0 auto;
display: flex;
position: relative;
.all {
width: 210px;
height: 45px;
background-color: #e1251b;
line-height: 45px;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.nav {
a {
height: 45px;
margin: 0 22px;
line-height: 45px;
font-size: 16px;
color: #333;
}
}
.sort {
position: absolute;
left: 0;
top: 45px;
width: 210px;
height: 461px;
position: absolute;
background: #fafafa;
z-index: 999;
.all-sort-list2 {
.item {
h3 {
line-height: 30px;
font-size: 14px;
font-weight: 400;
overflow: hidden;
padding: 0 20px;
margin: 0;
a {
color: #333;
}
}
.item-list {
display: none;
position: absolute;
width: 734px;
min-height: 460px;
background: #f7f7f7;
left: 210px;
border: 1px solid #ddd;
top: 0;
z-index: 9999 !important;
.subitem {
float: left;
width: 650px;
padding: 0 4px 0 8px;
dl {
border-top: 1px solid #eee;
padding: 6px 0;
overflow: hidden;
zoom: 1;
&.fore {
border-top: 0;
}
dt {
float: left;
width: 54px;
line-height: 22px;
text-align: right;
padding: 3px 6px 0 0;
font-weight: 700;
}
dd {
float: left;
width: 415px;
padding: 3px 0 0;
overflow: hidden;
em {
float: left;
height: 14px;
line-height: 14px;
padding: 0 8px;
margin-top: 5px;
border-left: 1px solid #ccc;
}
}
}
}
}
&:hover {
.item-list {
display: block;
}
}
}
}
}
}
}
</style>
- 在
main.js中注册为全局组件
### main.js
import Vue from 'vue'
......
import TypeNav from '@/pages/Home/TypeNav'
Vue.component(TypeNav.name,TypeNav) // 注册为全局组件
new Vue({
......
}).$mount('#app')
- 在
home.vue中,使用全局组件
### Home.vue
<template>
<div id="">
<h1>我是Home组件的内容</h1>
<TypeNav></TypeNav> <!--无需注册,直接用,因为是全局组件-->
</div>
</template>
<script>
export default {
name:'Home'
}
</script>
<style>
</style>
引入其他组件
- 引入
ListContainer组件(轮播图及右侧菜单)
### Home.ListContainer.index.vue
<template>
<!--列表-->
<div class="list-container">
<div class="sortList clearfix">
<div class="center">
<!--banner轮播-->
<div class="swiper-container" id="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/banner1.jpg" >
</div>
<!-- <div class="swiper-slide">
<img src="./images/banner2.jpg" />
</div>
<div class="swiper-slide">
<img src="./images/banner3.jpg" />
</div>
<div class="swiper-slide">
<img src="./images/banner4.jpg" />
</div> -->
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="right">
<div class="news">
<h4>
<em class="fl">尚品汇快报</em>
<span class="fr tip">更多 ></span>
</h4>
<div class="clearix"></div>
<ul class="news-list unstyled">
<li>
<span class="bold">[特惠]</span>备战开学季 全民半价购数码
</li>
<li>
<span class="bold">[公告]</span>备战开学季 全民半价购数码
</li>
<li>
<span class="bold">[特惠]</span>备战开学季 全民半价购数码
</li>
<li>
<span class="bold">[公告]</span>备战开学季 全民半价购数码
</li>
<li>
<span class="bold">[特惠]</span>备战开学季 全民半价购数码
</li>
</ul>
</div>
<ul class="lifeservices">
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">话费</span>
</li>
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">机票</span>
</li>
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">电影票</span>
</li>
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">游戏</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">彩票</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">加油站</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">酒店</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">火车票</span>
</li>
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">众筹</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">理财</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">礼品卡</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">白条</span>
</li>
</ul>
<div class="ads">
<img src="./images/ad1.png" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ListContainer'
}
</script>
<style lang="less" scoped>
.list-container {
width: 1200px;
margin: 0 auto;
.sortList {
height: 464px;
padding-left: 210px;
.center {
box-sizing: border-box;
width: 740px;
height: 100%;
padding: 5px;
float: left;
}
.right {
float: left;
width: 250px;
.news {
border: 1px solid #e4e4e4;
margin-top: 5px;
h4 {
border-bottom: 1px solid #e4e4e4;
padding: 5px 10px;
margin: 5px 5px 0;
line-height: 22px;
overflow: hidden;
font-size: 14px;
.fl {
float: left;
}
.fr {
float: right;
font-size: 12px;
font-weight: 400;
}
}
.news-list {
padding: 5px 15px;
line-height: 26px;
.bold {
font-weight: 700;
}
}
}
.lifeservices {
border-right: 1px solid #e4e4e4;
overflow: hidden;
display: flex;
flex-wrap: wrap;
.life-item {
border-left: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
margin-right: -1px;
height: 64px;
text-align: center;
position: relative;
cursor: pointer;
width: 25%;
.list-item {
background-image: url(./images/icons.png);
width: 61px;
height: 40px;
display: block;
}
.service-intro {
line-height: 22px;
width: 60px;
display: block;
}
&:nth-child(1) {
.list-item {
background-position: 0px -5px;
}
}
&:nth-child(2) {
.list-item {
background-position: -62px -5px;
}
}
&:nth-child(3) {
.list-item {
background-position: -126px -5px;
}
}
&:nth-child(4) {
.list-item {
background-position: -190px -5px;
}
}
&:nth-child(5) {
.list-item {
background-position: 0px -76px;
}
}
&:nth-child(6) {
.list-item {
background-position: -62px -76px;
}
}
&:nth-child(7) {
.list-item {
background-position: -126px -76px;
}
}
&:nth-child(8) {
.list-item {
background-position: -190px -76px;
}
}
&:nth-child(9) {
.list-item {
background-position: 0px -146px;
}
}
&:nth-child(10) {
.list-item {
background-position: -62px -146px;
}
}
&:nth-child(11) {
.list-item {
background-position: -126px -146px;
}
}
&:nth-child(12) {
.list-item {
background-position: -190px -146px;
}
}
}
}
.ads {
margin-top: 5px;
img {
opacity: 0.8;
transition: all 400ms;
&:hover {
opacity: 1;
}
}
}
}
}
}
</style>
### Home.vue
<template>
<div id="">
<!-- <h1>我是Home组件的内容</h1> -->
<TypeNav></TypeNav>
<ListContainer></ListContainer> <!--应用-->
</div>
</template>
<script>
import ListContainer from '@/pages/Home/ListContainer'
export default {
name:'Home',
components:{
ListContainer // 注册
}
}
</script>
<style>
</style>
- 引入
Recommend组件(今日推荐)
### Home.Recommend.vue
<template>
<!--今日推荐-->
<div class="today-recommend">
<div class="py-container">
<ul class="recommend">
<li class="clock">
<div class="time">
<img src="./images/clock.png" />
<h3>今日推荐</h3>
</div>
</li>
<li class="banner">
<img src="./images/today01.png" />
</li>
<li class="banner">
<img src="./images/today02.png" />
</li>
<li class="banner">
<img src="./images/today03.png" />
</li>
<li class="banner">
<img src="./images/today04.png" />
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name:'Recommend'
}
</script>
<style lang="less" scoped>
.today-recommend {
.py-container {
width: 1200px;
margin: 0 auto;
.recommend {
height: 165px;
background-color: #eaeaea;
margin: 10px 0;
display: flex;
.clock {
width: 16.67%;
background-color: #5c5251;
color: #fff;
font-size: 18px;
text-align: center;
.time {
padding: 30px 0;
}
h3 {
margin: 9px 0;
font-weight: 700;
font-size: 18px;
line-height: 30.06px;
}
}
.banner {
width: 20.83%;
img {
width: 100%;
height: 100%;
transition: all 400ms;
&:hover {
opacity: 0.8;
}
}
}
}
}
}
</style>
### Home.vue
<template>
<div id="">
......
<Recommend></Recommend> <!--应用-->
</div>
</template>
<script>
import ListContainer from '@/pages/Home/ListContainer'
import Recommend from '@/pages/Home/Recommend'
export default {
name:'Home',
components:{
ListContainer,
Recommend // 注册
}
}
</script>
<style>
</style>
- 引入
Rank组件
### Home.Rank.index.vue
<template>
<!-- 商品排行 -->
<div class="rank">
<div class="tab">
<div class="tab-tit clearfix">
<a href="javascript:;" class="on">
<p class="img">
<i></i>
</p>
<p class="text">热卖排行</p>
</a>
<a href="javascript:;">
<p class="img">
<i></i>
</p>
<p class="text">特价排行</p>
</a>
<a href="javascript:;">
<p class="img">
<i></i>
</p>
<p class="text">新品排行</p>
</a>
</div>
</div>
<div class="content">
<ul>
<li>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
</div>
<p class="info-price">定金：¥100.00</p>
</div>
</div>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
</div>
<p class="info-price">定金：¥100.00</p>
</div>
</div>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
</div>
<p class="info-price">定金：¥100.00</p>
</div>
</div>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
</div>
<p class="info-price">定金：¥100.00</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name:'Rank'
}
</script>
<style lang="less" scoped>
.rank {
width: 1200px;
margin: 0 auto;
.tab {
margin: 0 auto;
overflow: hidden;
width: 312px;
.tab-tit {
text-align: center;
a {
display: block;
padding: 0 18px;
float: left;
text-decoration: none;
font-size: 16px;
color: #999;
p {
margin: 5px 0;
}
.img {
i {
width: 35px;
height: 35px;
display: block;
background: url(./images/bg0.png);
margin-left: 10px;
}
}
.text {
line-height: 28px;
}
}
.on {
color: #e60012;
.img {
i {
background-position: -35px 0;
}
}
}
}
}
.content {
overflow: hidden;
padding: 10px;
ul {
li {
overflow: hidden;
list-style: none;
line-height: 18px;
.img-item {
border: 1px solid #e1251b;
width: 269px;
float: left;
overflow: hidden;
margin: 0 12px 10px;
background: #fff;
.tab-pic {
width: 230px;
height: 210px;
overflow: hidden;
text-align: center;
margin: 5px auto 18px;
a {
img {
width: 200px;
height: 200px;
}
}
}
.tab-info {
background: #fafafa;
.info-title {
height: 50px;
line-height: 28px;
overflow: hidden;
margin: 0 auto;
padding-left: 10px;
a {
color: #333;
text-decoration: none;
}
}
.info-price {
font-size: 20px;
color: #e1251b;
height: 35px;
padding-left: 10px;
display: block;
line-height: 24px;
margin: 10px auto 0;
}
}
}
}
}
}
}
</style>
- 引入
Like组件
### Home.Like.index.vue
<template>
<!-- 猜你喜欢 -->
<div class="like">
<div class="py-container">
<div class="title">
<h3 class="fl">猜你喜欢</h3>
<a href="javascript:;" class="fr tip changeBnt">换一换</a>
</div>
<div class="bd">
<ul class="favourate">
<li>
<img src="./images/like_02.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_03.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_01.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_02.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_03.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_01.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name:'Like'
}
</script>
<style lang="less" scoped>
.like {
margin-top: 15px;
.py-container {
width: 1200px;
margin: 0 auto;
.title {
overflow: hidden;
.fl {
float: left;
font-size: 20px;
line-height: 30px;
}
.fr {
float: right;
background-image: url(./images/icons.png);
width: 66px;
height: 25px;
background-position: 182px -104px;
line-height: 30px;
font-size: 12px;
font-weight: 400;
color: #666;
text-decoration: none;
}
}
.bd {
.favourate {
border: 1px solid #e4e4e4;
overflow: hidden;
padding: 0 10px;
box-sizing: border-box;
display: flex;
li {
height: 250px;
margin: 0 -1px;
overflow: hidden;
background: #fff;
position: relative;
width: 16.667%;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
img {
width: 142px;
height: 142px;
transition: all 400ms;
&:hover {
opacity: 0.8;
transform: scale(1.1)
}
}
.like-text {
padding: 0;
width: 142px;
border-right: 1px solid #e4e4e4;
p {
margin: 5px 0;
}
h3 {
color: #df3033;
font-size: 20px;
line-height: 30px;
margin: 9px 0;
font-weight: 700;
}
}
}
}
}
}
}
</style>
- 引入
Floor组件
### Home.Floor.index.vue
<template>
<!--楼层-->
<div class="floor">
<div class="py-container">
<div class="title clearfix">
<h3 class="fl">家用电器</h3>
<div class="fr">
<ul class="nav-tabs clearfix">
<li class="active">
<a href="#tab1" data-toggle="tab">热门</a>
</li>
<li>
<a href="#tab2" data-toggle="tab">大家电</a>
</li>
<li>
<a href="#tab3" data-toggle="tab">生活电器</a>
</li>
<li>
<a href="#tab4" data-toggle="tab">厨房电器</a>
</li>
<li>
<a href="#tab5" data-toggle="tab">应季电器</a>
</li>
<li>
<a href="#tab6" data-toggle="tab">空气/净水</a>
</li>
<li>
<a href="#tab7" data-toggle="tab">高端电器</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane">
<div class="floor-1">
<div class="blockgary">
<ul class="jd-list">
<li>节能补贴</li>
<li>4K电视</li>
<li>空气净化器</li>
<li>IH电饭煲</li>
<li>滚筒洗衣机</li>
<li>电热水器</li>
</ul>
<img src="./images/floor-1-1.png" />
</div>
<div class="floorBanner">
<div class="swiper-container" id="floor1Swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/floor-1-b01.png">
</div>
<!-- <div class="swiper-slide">
<img src="./images/floor-1-b02.png">
</div>
<div class="swiper-slide">
<img src="./images/floor-1-b03.png">
</div> -->
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="split">
<span class="floor-x-line"></span>
<div class="floor-conver-pit">
<img src="./images/floor-1-2.png" />
</div>
<div class="floor-conver-pit">
<img src="./images/floor-1-3.png" />
</div>
</div>
<div class="split center">
<img src="./images/floor-1-4.png" />
</div>
<div class="split">
<span class="floor-x-line"></span>
<div class="floor-conver-pit">
<img src="./images/floor-1-5.png" />
</div>
<div class="floor-conver-pit">
<img src="./images/floor-1-6.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'Floor'
}
</script>
<style lang="less" scoped>
.floor {
margin-top: 15px;
.py-container {
width: 1200px;
margin: 0 auto;
.title {
.fl {
float: left;
color: #c81623;
font-size: 20px;
line-height: 30px;
margin: 9px 0;
font-weight: 700;
}
.fr {
float: right;
.nav-tabs {
margin: 10px 0 0;
display: inline-block;
li {
float: left;
line-height: 18px;
a {
padding-top: 1px;
font-weight: 400;
background-color: #fff;
&::after {
content: "|";
padding: 0 10px;
}
}
&:nth-child(7) {
a {
&::after {
content: "";
}
}
}
&.active {
a {
color: #e1251b;
}
}
}
}
}
}
.tab-content {
border-top: 2px solid #c81623;
border-bottom: 1px solid #e4e4e4;
.tab-pane {
.floor-1 {
height: 360px;
display: flex;
.blockgary {
width: 210px;
height: 100%;
background: #f7f7f7;
.jd-list {
padding: 15px 0;
overflow: hidden;
li {
list-style-type: none;
float: left;
width: 40%;
margin: 0 10px;
border-bottom: 1px solid #e4e4e4;
text-align: center;
line-height: 26px;
}
}
img {
width: 100%;
}
}
.floorBanner {
width: 330px;
height: 100%;
}
.split {
width: 220px;
height: 100%;
position: relative;
.floor-x-line {
position: absolute;
background: #e4e4e4;
width: 220px;
height: 1px;
top: 180px;
}
.floor-conver-pit {
width: 100%;
height: 50%;
img {
width: 100%;
height: 100%;
transition: all 400ms;
&:hover {
opacity: 0.8;
}
}
}
}
.center {
border: 1px solid #e4e4e4;
}
}
}
}
}
}
</style>
Home组件最终注册效果,至此,Home页组件拆分完成
### Home.vue
<template>
<div id="">
<!-- <h1>我是Home组件的内容</h1> -->
<TypeNav></TypeNav>
<ListContainer></ListContainer>
<Recommend></Recommend>
<Rank></Rank>
<Like></Like>
<Floor></Floor> <!--复用两次-->
<Floor></Floor>
</div>
</template>
<script>
import ListContainer from '@/pages/Home/ListContainer'
import Recommend from '@/pages/Home/Recommend'
import Rank from '@/pages/Home/Rank'
import Floor from '@/pages/Home/Floor'
import Like from '@/pages/Home/Like'
export default {
name:'Home',
components:{
ListContainer,
Recommend,
Rank,
Floor,
Like
}
}
</script>
<style>
</style>
