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'
![](https://i-blog.csdnimg.cn/blog_migrate/ce01c1843c8af8207eeb8aaa38527961.png)
3
vue add element
![](https://i-blog.csdnimg.cn/blog_migrate/f69c5f3e1cd0f8779b082df349bd7eff.png)
4
npm i axios -S
5 引入基础样式
![](https://i-blog.csdnimg.cn/blog_migrate/05b3a7393b4b544d59be9894f48d64fd.png)
/* 导入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 less@3.0.4--save
npm install less-loader@5.0.0--save
12
使用
<style lang="less" scoped></style>
2 首页制作
2.1 创建组件
![](https://i-blog.csdnimg.cn/blog_migrate/0a3becb642c70a0ad7f1130daee8fc2b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4229747dbc8c253b68757bd5659c7cab.png)
配置出口:
二级路由出口
![](https://i-blog.csdnimg.cn/blog_migrate/3189fdd1c76ad90f0776a6eece946a14.png)
一极路由出口
![](https://i-blog.csdnimg.cn/blog_migrate/898d3aa96430e47dd7de98ad336b2f3d.png)
2.2 引入
![](https://i-blog.csdnimg.cn/blog_migrate/4eb798b78bb4b7e6a9819d0940bfea5b.png)
再mainjs中引入 elemt.js
2.4 编写头部
![](https://i-blog.csdnimg.cn/blog_migrate/8a53430188b8b52652b65eea651db728.png)
1 抽取组件
![](https://i-blog.csdnimg.cn/blog_migrate/ef7455aa31c9aad872828796e4b245f6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2c0e2f328ea8d006d903d939c19ab0c7.png)
2.5 swiper 轮播
1 方法一:
![](https://i-blog.csdnimg.cn/blog_migrate/9506cc55fa454c30be032521db7fb875.png)
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
![](https://i-blog.csdnimg.cn/blog_migrate/1363995ea5e571137d88df543d62b737.png)
代码:
![](https://i-blog.csdnimg.cn/blog_migrate/f732a444f4391acfd8046b7b3b450d16.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e11f4cb66d12ee9560ed2e5cda9a6584.png)
高度有点短,进行设置
图片上有字: 用绝对定位定在里边
<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 的
![](https://i-blog.csdnimg.cn/blog_migrate/4a0a45bde72838720dd05aa899d9e5cf.png)
使用步骤:
安装: npm install swiper@5.x vue-awesome-swiper@4.x --save
安装两个, 我们安装的swiper 5的版本
![](https://i-blog.csdnimg.cn/blog_migrate/4e8694f5a01143c2baedd5ada23f2f84.png)
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>
参数配置
具体看官网:
![](https://i-blog.csdnimg.cn/blog_migrate/b39aa506fbde7e55d67c84345ba23eb5.png)
<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样式
![](https://i-blog.csdnimg.cn/blog_migrate/917f0db8aa252983667693855341e7c2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d728f573234e204d75d03365f02decb5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ca043116fb5819e10894e3711ef6da03.png)
<!-- 搜索框效果:
1. 聚焦显示热门城市
2. 失去焦点热门城市隐藏
3. 输入内容 显示搜索列表 热门城市隐藏
4. 输入内容 又删除--输入的值为空 搜索列表隐藏 热门城市显示
5. 输入的值存在 失去焦点 隐藏搜索列表
6. 输入的值存在 聚焦 显示搜索列表
-->
![](https://i-blog.csdnimg.cn/blog_migrate/6271524771743720ebcf067541b65cba.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3c03ee6ff84578fd3b2172e1c6486d40.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ee8d5c076678352144410b048b4ac6fe.png)
2.7 今日推荐
![](https://i-blog.csdnimg.cn/blog_migrate/780edfadc0f30282a8aad225a4a48a22.png)
注意:
1 v-htmll展示 带html的数据
2 不同类型显示不同数据的写法
![](https://i-blog.csdnimg.cn/blog_migrate/72900cb705dc342cac3f18ccb98fb617.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f52cdb234afd53db25c9a12b5cab2706.png)
<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 穷游
展示数据:
父传子
![](https://i-blog.csdnimg.cn/blog_migrate/41b2d6f2369c8e3b2ff803ed07f8531d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/499f58dea6ab028a3a45ffcf8710d3af.png)
2 换一换
page +1 重新调用接口
子传父
![](https://i-blog.csdnimg.cn/blog_migrate/1bbefbdae7aa3bd19e30582447409842.png)
2.9 热门游记与话题
![](https://i-blog.csdnimg.cn/blog_migrate/146b06233d08ac59b9a6def8d94e6ed2.png)
使用轮播图进行展示:
![](https://i-blog.csdnimg.cn/blog_migrate/1c99fd7abe1c1b40c046e4f27236284d.png)
返回应该是一个【二维数组】:
![](https://i-blog.csdnimg.cn/blog_migrate/c2851be128f40506f88ade2e497e8a1b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/480f73a09e2f387938c005a8df373175.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b26a03eb6c742f9d36b18368d194a7bd.png)
代码:
![](https://i-blog.csdnimg.cn/blog_migrate/2293e98cb691e9db2c0c3386be80d3c0.png)
2 注意 swipper他的高度太短,设置一下
.el-carousel__container{
height: 630px;
}
3 发现好多文字 超出两行的,需要进行设置
![](https://i-blog.csdnimg.cn/blog_migrate/cfd59ba3073d44eb1085d5a04734eb66.png)
.info {
font-size: 16px;
height: 48px;
line-height: 24px;
overflow: hidden;
}
![](https://i-blog.csdnimg.cn/blog_migrate/f1af3b66317265fc52b7216894237854.png)
省略号写法:
![](https://i-blog.csdnimg.cn/blog_migrate/d215a2e529b5f6a57df288d0381ee297.png)
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">