Vue 框 ui 库
vant 库 -- 移动端 **
Mint UI
Antd vue官网:https://www.antdv.com/docs/vue/introduce-cn
element-ui -- pc 后台 **
Element-ui 库
安装 vue/cli 脚手架vue add element
基本使用
1 项目安装依赖
Vue 全家桶 vue + vue-router + vuex + axios +Element
项目初始化 css normalize.css
npm i normalize.css -S
import 'normalize.css'
3
vue add element
4
npm i axios -S
5 引入基础样式
/* 导入iconfont */
@import url('http://at.alicdn.com/t/c/font_3792124_p0cmgbsjbol.css');
html,body,#app{
height: 100%;
}
a{
text-decoration: none;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
em{
font-style: normal;
}
dl,dd{
padding:0;
margin: 0;
}
6 安装less
npm install [email protected]
npm install [email protected]
12
使用
<style lang="less" scoped></style>
2 首页制作
2.1 创建组件
配置出口:
二级路由出口
一极路由出口
2.2 引入
再mainjs中引入 elemt.js
2.4 编写头部
1 抽取组件
2.5 swiper 轮播
1 方法一:
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{
{ item }}</h3>
</el-carousel-item>
</el-carousel>
代码:
高度有点短,进行设置
图片上有字: 用绝对定位定在里边
<template>
<div>
<el-carousel arrow="always" class="carousel">
<el-carousel-item>
<img src="@/assets/images/banner1.jpg" alt="" />
<div class="title">
旅游胜地
</div>
</el-carousel-item>
<el-carousel-item>
<img src="@/assets/images/banner2.jpg" alt="" />
</el-carousel-item>
<el-carousel-item>
<img src="@/assets/images/banner3.jpg" alt="" />
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name: 'bBanner'
}
</script>
<style scoped lang="less">
/deep/ .el-carousel__container {
height: 600px;
}
</style>
2 方法二:
注意是vue2 还是vue3 的
使用步骤:
安装: npm install [email protected] [email protected] --save
安装两个, 我们安装的swiper 5的版本
main.js 导入文件
import VueAwesomeSwiper from'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
组件使用
<template>
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
参数配置
具体看官网:
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOptions: {
pagination: {
el: '.swiper-pagination'
},
// Some Swiper option/callback...
}
}
},
computed: {
swiper() {
returnthis.$refs.mySwiper.$swiper
}
},
mounted() {
console.log('Current Swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
</script>
代码:
<template>
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide>
<img src="@/assets/images/banner1.jpg" width="100%" alt="">
</swiper-slide>
<swiper-slide>
<img src="@/assets/images/banner2.jpg" width="100%" alt="">
</swiper-slide>
<swiper-slide>
<img src="@/assets/images/banner3.jpg" width="100%" alt="">
</swiper-slide>
<!-- 轮播点 -->
<div class="swiper-pagination" slot="pagination"></div>
<!-- -->
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</template>
<script>
export default {
data() {
return {
swiperOptions: {//swiper配置信息
//分页器
pagination: {
el: '.swiper-pagination'
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//自动轮播
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
}
}
}
}
}
</script>
<style>
</style>
2.6 搜索框
1 css样式
<!-- 搜索框效果:
1. 聚焦显示热门城市
2. 失去焦点热门城市隐藏
3. 输入内容 显示搜索列表 热门城市隐藏
4. 输入内容 又删除--输入的值为空 搜索列表隐藏 热门城市显示
5. 输入的值存在 失去焦点 隐藏搜索列表
6. 输入的值存在 聚焦 显示搜索列表
-->
2.7 今日推荐
注意:
1 v-htmll展示 带html的数据
2 不同类型显示不同数据的写法
<div class="bottom">
<template v-if="item.type == 'video'">
<span class="fr">{
{ item.data.tag }}</span>
<span class="f14">{
{ item.data.desc }}</span>
</template>
<template v-else-if="item.type == 'bbs'">
<span class="fr">{
{ item.data.views }}人浏览过</span>
<span class="f14">{
{ item.data.username }}</span>
</template>
<template v-else>
<!-- 指令:{
{ }} v-text='' v-html='变量' -->
<span class="fr money" v-html="item.data.price"></span>
<span class="f14">{
{ item.data.start_pos }}</span>
</template>
</div>
2.8 穷游
展示数据:
父传子
2 换一换
page +1 重新调用接口
子传父
2.9 热门游记与话题
使用轮播图进行展示:
返回应该是一个【二维数组】:
代码:
2 注意 swipper他的高度太短,设置一下
.el-carousel__container{
height: 630px;
}
3 发现好多文字 超出两行的,需要进行设置
.info {
font-size: 16px;
height: 48px;
line-height: 24px;
overflow: hidden;
}
省略号写法:
line-height: 24px;
max-height: 48px;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
参考:
穷游接口
图片防盗链 ---- 403
<meta name="referrer" content="never">