基于vue的旅游网项目

vue旅游网项目

1、reset.css

引入css

import ‘./assets/css/reset.css’

在这个文件中添加：html{font-size:50px;}

a{text-decation:none}

2、fastclick.js

npm i fastclick --save;

//在main.js中引入

import FastClick from ‘fastclick’;

FastClick.attach(document.body)

3、字体图标（阿里的字体图标）

(1)将iconfont.css放入css文件夹中,此文件需要做个修改(’…/font/’)

(2)在assets中创建一个新的问价夹font文件夹：.svg/.ttf/.eot/.woff

在main.js中引入

import ‘./assets/css/iconfont.css’

4、@代表src

5、基础代码页面：

6、在移动端一般使用rem 作为单位，一般情况下我们的设计图都是750px，除以2正好是iphone下面的开发

打开：reset.css，本项目中采用50px,进行撰写；为了方便也可以使用100px进行编写；

7、页面中iconfont代码的书写

<span class='iconfont'>将代码复制过来</span>

8、主题颜色

npm i stylus stylus-loader

在css文件中建一个var.styl文件

$bgColor =red;

//使用

<Style scoped lang='stylus'>
@import "../../../assetc/css/var.styl"//这个引入太常了，我们也可以这样做
@import "~@/assets/css/var.styl"
//也可以在bulid/webpack.base.conf.js中进行配置；'css':resolve('src/assets/css')
@import "~css/var.styl"
.box{
background:$bgColor
}
</style>

上述配置完成后，也应该将main.js中文件的引入进行更换:

import ‘css/reset.css’

import ‘css/iconfont.css’

~是需要在style中添加；

9、vue-swiper

下载

npm i vue-awesome-swiper --save

在main.js中引入：import ‘swiper/dist/css/swiper.css’

在这里的时候，需要注意下载版本的问题，遇到错误的时候，百度解决；

在项目过程中用到的一些swiper中的API可以参考swiper官网；

10、在项目中引入ui库默认样式的修改

.wrap>>>.swiper-container-horizontal > .swiper-pagination-bullets{
  bottom:0px;
}

11、当文本单行溢出显示省略号

在文本标签处，添加以下三个属性即可：

.item{
  */\* 处理文本内容溢出 \*/*
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

12、强制不换行，当元素超出时，显示横向的滚动条

<div class="hot-box">
      <ul class="hot-content">
        <li v-for="item in imgList" :key="item.id" class="hot-item">
          <img :src="item.imgUrl" alt="" />
          <p>{{ item.name }}</p>
          <p>
            <span class="price">{{ item.price }}</span> 起
          </p>
        </li>
      </ul> 
</div>

.hot-box {
  width: 100%;
  overflow-x: scroll;
  padding-bottom: 0.2rem;
}
.hot-content {
  width: 5000%;
  white-space: nowrap;
}
.hot-item {
  text-align: center;
  float: left;
  width: 2rem;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
  font-size: 0.3rem;
}

13、在城市列表中，希望头部是固定死的，其余的都需要滑动

（1）借用一个插件，better-scroll;

下载：npm i better-scroll --save ；

在所需要的组件中引入：import BScroll from ‘better-sroll’；

其余的步骤参考github；

在这里需要注意的是：在外层的结构中需要添加定位的属性；

.container{
position:absolute;
//写定位的具体位置
}

（2）点击字母排序，跳转到对应字母所在的位置：

首先添加事件，拿到目标值；

在目标值里面遍历，添加ref；

最后利用better-scroll的API来实现（scrollToElement）；

this.srcoll.srcollToElement()

14、对象的遍历

在vue中遍历对象的时候，v-for=’(val,key,i) in user’;

其中第一个参数代表：值，第二个参数代表键，第三个参数索引

15、数据的共享利用vuex状态管理来实现

mapState对接的是state

mapMutations对接的是mutations

一般结合本地存储来进行，因为用vuex来管理数据，页面在刷新的时候，数据会丢失，所以需要结合本地存储

16、项目优化

当页面中的城市不发生变化的时候，不应该在去发送请求，这个时候，可以使用到keep-alive将路由出口进行包裹；

keep-alive是系统自动注入的组件

作用:实现组件的缓存(为了避免重复的创建和销毁组件)

使用: 需要缓存的组件被keep-alive包裹起来

//当页面挂载完成时，将存储在vuex中的城市名称赋值给自定义的变量，向后端发起axios请求；
mouted(){
 this.changeCity = this.city;
 this.getHttp();
}
activated(){
//组件被激活时，做一个判断，若是页面中的城市和Vuex中的城市是不相等的时候，则发送数据请求
if( this.changeCity != this.city){
 this.getHttp();
 this.changeCity = this.city;
 }
}

17、当滚动的时候，头部的内容区域显示并且透明度从0到1进行一个变化

//页面挂载完成时
mounted(){
let that = this ;
window.addEventListener('scroll',function(){
 let top = document.documentElement.scrollTop;
 if(top > 45){
 let opacity = top /130;
 opacity = opacity > 1 ? 1 : opacity;
 that.styleOpacity = {opacity};
 this.showHeader = false;
 }else{
   this.showHeader = true;
 }
 })
}
data(){
return {
//将此元素的透明度设置成一个变量去进行控制
  styleOpacity:{
  opacity : 0
  }
  }
}

18、在滚动的时候，每次进入页面需要在页面的头部

//利用keep-alive中的一个生命周期
actived(){
document.documentElement.scrollTop = 0
}

19、真机测试

获取ip，输入ifconfig可以获得到；

在package.json中：

"scriptes":{
"dev":"webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.js"
}

20、项目打包上线

npm run bulid