Pasos de aprendizaje del proyecto
Recuerde usar git para administrar el proyecto
Mío: https://gitee.com/owahahah/xianyu-development
Profesor: https://gitee.com/imyyliang/xianyun56-development
Acuerdo de desarrollo
- Inicializar el diseño
- Componentes comunes de encabezado y pie de página
- Carrusel de la página de inicio
Inicializar el diseño global predeterminado
Esto es equivalente a app.vue
nuxtjsSe proporciona un componente de diseño público layouts/default.vue, que actúa en todas las páginas de forma predeterminada, por lo que podemos agregar algunos estilos públicos aquí, e importaremos componentes públicos en el siguiente resumen
El layouts/default.vuecódigo de reemplazo es el siguiente:
<template>
<div>
<!-- 内容占位组件 -->
<nuxt />
</div>
</template>
<script>
export default {
}
</script>
<style lang="less">
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*{
margin:0;
padding:0;
}
ul, li, ol{
list-style:none;
}
a{
text-decoration:none;
color:inherit;
}
a:hover{
}
em,i{
font-style: normal;
}
</style>
Nuevo componente público
Ideas
- En la
componentsaplicación de un conjunto de cabecera y pie de página uniformes en el nuevo conjunto. layouts/default.vueImporte componentes comunes en el diseño predeterminado .
Convención de componentes: los componentes públicos no necesitan colocarse en subcarpetas
Documento del componente del menú desplegable: https://element.eleme.cn/#/zh-CN/component/dropdown#ji-chu-yong-fa
Pasos de implementación
Componente principal: el diseño utiliza una gran cantidad de diseños de diseño de elementos
componentsCree un nuevo componente de encabezado en la carpeta components/header.vue.
<template>
<header class="header">
<el-row type="flex" justify="space-between" class="main">
<!-- logo -->
<div class="logo">
<nuxt-link to="/">
<img src="http://157.122.54.189:9093/images/logo.jpg" alt="">
</nuxt-link>
</div>
<!-- 菜单栏 -->
<el-row type="flex" class="navs">
<nuxt-link to="/">首页</nuxt-link>
<nuxt-link to="/post">旅游攻略</nuxt-link>
<nuxt-link to="/hotel">酒店</nuxt-link>
<nuxt-link to="/air">国内机票</nuxt-link>
</el-row>
<!-- 登录/用户信息 -->
<el-row type="flex" align="middle">
<!-- 如果用户存在则展示用户信息，用户数据来自store -->
<el-dropdown v-if="false">
<el-row type="flex" align="middle" class="el-dropdown-link">
<nuxt-link to="#">
<img src="http://157.122.54.189:9093/images/pic_sea.jpeg"/>
用户名
</nuxt-link>
<i class="el-icon-caret-bottom el-icon--right"></i>
</el-row>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<nuxt-link to="#">个人中心</nuxt-link>
</el-dropdown-item>
<el-dropdown-item>
<div @click="handleLogout">退出</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- 不存在用户信息展示登录注册链接 -->
<nuxt-link to="/user/login" class="account-link" v-else>
登录 / 注册
</nuxt-link>
</el-row>
</el-row>
</header>
</template>
<script>
export default {
methods: {
// 用户退出
handleLogout(){},
}
}
</script>
<style scoped lang="less">
.header{
height: 60px;
line-height:60px;
background:#fff;
border-bottom: 1px #ddd solid;
box-shadow:0 3px 0 #f5f5f5;
box-sizing: border-box;
.main{
width:1000px;
margin:0 auto;
}
.logo{
width:156px;
padding-top:8px;
img{
display: block;
width:100%;
}
}
.navs{
margin: 0 20px;
flex:1;
a{
display:block;
padding:0 20px;
height:60px;
box-sizing: border-box;
&:hover,&:focus, &:active {
border-bottom:5px #409eff solid;
color:#409eff;
}
}
/deep/ .nuxt-link-exact-active{
background:#409eff;
color:#fff!important;
}
}
.message{
height:36px;
line-height:1;
cursor:pointer;
.el-icon-bell{
margin-right:2px;
font-size:18px;
}
}
.el-dropdown-link{
margin-left:20px;
&:hover{
img{
border-color: #409eff;
}
}
a{
display:block;
}
img{
width:32px;
height:32px;
vertical-align: middle;
border:2px #fff solid;
border-radius:50px;
}
}
.account-link{
font-size: 14px;
margin-left:10px;
color:#666;
&:hover{
color:#409eff;
text-decoration: underline;
}
}
}
</style>
Nota:
/deep/ .nuxt-link-exact-activeEl color en el estilo es el color cuando el menú está resaltado.
En la layouts/default.vueintroducción del conjunto de cabezal.
<template>
<div>
<!-- 头部组件 -->
<Header/>
<!-- 内容占位组件 -->
<nuxt />
</div>
</template>
<script>
// 导入头部组件
import Header from "@/components/header"
export default {
// 注册组件
components: {
Header
}
}
</script>
<style lang="less">
/* 省略样式 */
</style>
Después de la implementación,
登录注册功能regrese para determinar si desea mostrar la información del usuario o iniciar sesión para registrar el botón.
Componente de pie de página
componentsCree un nuevo componente de encabezado en la carpeta components/footer.vue.
<template>
<div class="footer-wrapper">
<div class="footer">
<el-row class="info-list">
<el-col :span="6" :offset="1">
<h5>闲云旅游旅游网</h5>
<p>上亿旅行者共同打造的"旅行神器"</p>
<p><span>60,000</span> 多个全球旅游目的地</p>
<p><span>600,000</span> 个细分目的地新玩法</p>
<p><span>760,000,000</span> 次攻略下载</p>
<p><span>38,000</span> 家旅游产品供应商</p>
</el-col>
<el-col :span="5">
<h5>关于我们</h5>
<p>隐私政策 商标声明</p>
<p>服务协议 游记协议</p>
<p>商城平台服务协议</p>
<p>网络信息侵权通知指引</p>
<p>闲云旅游旅游网服务监督员</p>
<p>网站地图加入闲云旅游</p>
</el-col>
<el-col :span="5">
<h5>旅行服务</h5>
<p>旅游攻略 酒店预订</p>
<p>旅游特价 国际租车</p>
<p>旅游问答 旅游保险</p>
<p>旅游指南 订火车票</p>
<p>旅游资讯 APP下载</p>
</el-col>
<el-col :span="6" class="scan">
<p>
<img src="http://157.122.54.189:9093/images/1556522965.png" alt="">
</p>
关注我们
</el-col>
</el-row>
<div class="licence">
京ICP备08001421号 京公网安备110108007702 Copyright © 2016-2019 博学谷 All Rights Reserved
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped lang="less">
.footer-wrapper{
background:#333;
color:#ccc;
min-width:1000px;
}
.footer{
padding-top:30px;
margin:0 auto;
width:1000px;
}
.info-list{
h5{
font-weight: normal;
font-size:16px;
margin-bottom:10px;
}
p{
font-size:12px;
line-height: 1.8;
span{
color:orange;
}
}
}
.scan{
text-align: center;
img{
width:140px;
height:140px;;
}
font-size:12px;
}
.licence{
border-top:1px #666 solid;
margin-top:20px;
padding:50px 0;
text-align: center;
font-size:12px;
}
</style>
Al layouts/default.vuepresentar el conjunto de pie de página
<template>
<div>
<!-- 头部组件 -->
<Header/>
<!-- 内容占位组件 -->
<nuxt />
<!-- 页脚组件 -->
<Footer/>
</div>
</template>
<script>
// 导入头部组件
import Header from "@/components/header";
// 导入页脚组件
import Footer from "@/components/footer";
export default {
// 注册组件
components: {
Header,
Footer
}
}
</script>
Ahora puede ver el último efecto de página.
para resumir
layouts/default.vueEs el componente de diseño predeterminado y actuará en cualquier página.- Al
layouts/default.vuepresentar los componentes generales del conjunto del cabezal y el pie de página
Página de inicio Carrusel Image-Background Image Switch
Ideas
- Utilice
Element-uiel conjunto de diapositivasel-carousel, el nuevo diseño de mapa del carrusel de inicio. - Solicite la interfaz de back-end para reemplazar los datos de la imagen estática
Combina las etiquetas el-carrusel y el-carrusel-elemento para obtener una linterna giratoria. El contenido de la diapositiva es arbitrario y debe colocarse en la etiqueta el-carousel-item.
De forma predeterminada, el interruptor se activa cuando el mouse pasa por encima del indicador en la parte inferior.
Al configurar el atributo de activación para hacer clic, se puede lograr el efecto de activación de clic.
Si la flecha está configurada en siempre, siempre se mostrará El intervalo de tiempo para el cambio automático de intervalo, en milisegundos. datos
Pasos de implementación
Diseño de carrusel agregado
pages/index.vueReemplace el contenido con el siguiente código:
<template>
<div class="container">
<!-- 幻灯片 -->
<el-carousel
:interval="5000"
arrow="always">
<el-carousel-item
v-for="(item, index) in banners"
:key="index">
<div class="banner-image"
:style="`
background:url(${item.url}) center center no-repeat;
background-size:contain contain;
`">
</div>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
data(){
return {
// 轮播图数据
banners: [
{
url: "http://157.122.54.189:9095/assets/images/th03.jfif",
},
{
url: "http://157.122.54.189:9095/assets/images/th04.jfif",
}
]
}
}
}
</script>
<style scoped lang="less">
.container{
min-width:1000px;
margin:0 auto;
position:relative;
/deep/ .el-carousel__container{
height:700px;
}
.banner-image{
width:100%;
height:100%;
}
}
</style>
La página de inicio de vista previa debería poder mostrar el carrusel normalmente
Banners es una matriz de datos muerta construida por nosotros mismos, que se utiliza para generar múltiples imágenes para carrusel después del recorrido.
Solicitar datos de la interfaz de back-end
A continuación, use los datos de la interfaz para reemplazar los datos estáticos locales
<script>
export default {
data(){
return {
banners: [], // 轮播图数据
}
},
mounted(){
this.$axios({
url: "/scenics/banners"
}).then(res => {
const {
data} = res.data;
this.banners = data;
})
}
}
</script>
La templatedirección de imagen reemplazada se agrega $axios.defaults.baseURLporque el enlace de imagen devuelto por la interfaz es un enlace relativo
<!--省略代码-->
<div class="banner-image"
:style="`
background:url(${$axios.defaults.baseURL}${item.url}) center center no-repeat;
background-size:contain contain;
`">
</div>
<!--省略代码-->
para resumir
- Utilice
Element-uiel conjunto de diapositivasel-carouselpara lograr un carrusel que muestre datos muertos, imágenes fijas - Utilice la
this.$axiosinterfaz de carrusel de fondo de solicitud para obtener datos - Utilice la
$axios.defaults.baseURLdirección de imagen completa para mostrar en la plantilla