一、项目中遇到的问题、难点及解决方式

1. 移动端开发中的1px边框问题,由于在不同设备屏幕上,可能会使得1px实际在移动端显示不是1px,怎么解决?

2. 移动端click点击事件,会延迟300ms,怎么解决?
解决:引入fastclick插件,解决移动端300ms延迟问题;
    npm install fastclick --save;
    在router 文件夹下main.js文件中写如下代码
     import fastClick from 'fastclick'
    fastClick.attach(document.body)

3. scoped限制vue文件下的css仅在该.vue文件下使用;

4. iconfont字体图标的应用:
    步骤: 4.1 在iconfont注册账号,建立一个项目,然后将需要的图标加入到该项目下,下载到本地电脑该项目文件夹下src->assets->iconfont中。
          4.2 在iconfont.css的url中修改字体在本地的路径,在main.js中直接引入该文件import "./assets/iconfont.css"。
          4.3 <span class="iconfont"></span>即可显示该图标字体。

5. stylus样式的应用:
    步骤:5.1安装: npm install --save  stylus;有时下载需要npm install --save  stylus-loader;
             5.2 使用:<style lang="stylus" scoped/> 。
             5.3 varibles.stylus该文件夹存放stylus的变量,

在<style lang="stylus" scoped/>标签内引入@import "../../assets/varibles.stylus",然后

background:@bgColor即可使用该变量。 
6. @在路径中指的是src目录,即@/assets/css/reset.css,注意,在css样式中引入其他css目录时,需要写成~@/assets/css/reset.css。

7. 简化路径,为常用路径简化别名,如@/assets/css/可简化为csss/:
    步骤:7.1 在build下webpack.base.conf.js文件下
            resolve: {
                extensions: ['.js', '.vue', '.json'],
                alias: {
                  'vue$': 'vue/dist/vue.esm.js',
                  '@': resolve('src'),    //@这是src目录的别名
                  'csss':resolve('src/css')   //这是src/css的别名,从而用csss替代src/css路径达到简化效果
                }
            }
         7.2 重启vue项目,vue run dev;
         
8. vue-awesome-swiper轮播插件的应用:
    步骤:1在main.js中引入全局插件:
            npm install --save vue-awesome-swiper@2.6.7
            import VueAwesomeSwiper from 'vue-awesome-swiper'
            import "swiper/dist/css/swiper.css"
            Vue.use(VueAwesomeSwiper)
         2.
        <swiper :options="swiperOption" >
            <!-- slides -->
            <swiper-slide>
                <img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1807/a1/41a802abfc4f0202.jpg_750x200_9f0cf69c.jpg" alt="去哪网"/>
            </swiper-slide>
            <swiper-slide>
                <img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1806/de/df09fa61aed2d502.jpg_750x200_67472739.jpg" alt="去哪网" />
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>

9. 轮播中出现的抖动现象

解决方式:设置元素的宽高比值固定:
    .wrapper
        overflow:hidden
        width:100%
        height:0
        padding-bottom:31.25%   //即高始终为宽的31.25%
    扩展:父元素display:flex布局,子元素flex:1;min-width:0,表示自适应父元素剩余的宽度,且不会超出父元素的宽度。
    
10. axios:实现跨平台的请求
    步骤:10.1  npm install axios --save  //或者<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
          10.2  import axios from "axios"
          10.3  methods:{            //通过.json文件模拟后端接受的数据,将index.json文件放在static里面
                      getHomeInfo(){
                          axios.get("./static/mock/index.json").then(this.getHomeInfoSucc)
                      },
                      getHomeInfoSucc(res){
                          console.log(res)
                      }
                  }
         10.4 在config>index.js里面 做如下设置,则可以实现通过调用api/index.json接口时,自动转到本地static/mock/index.json文件   
                 proxyTable: {
                    "/api":{
                        target:"http://location:8098",
                        pathRewrite:{
                            "^/api":"/static/mock"
                        }
                    }
                }
11. better-scroll使用方法:
        1. npm下载better-scroll:npm install better-scroll --save;
        2. 引入better-scroll:import Bscroll from "better-scroll";
        3. 定义标签dom:  < div ref="div"></div>
        4. 实例化bscroll: this.scroll=new Bscroll(this.$refs.div)即可;
注意:Bscroll提供滚动到指定DOM位置的API,this.scroll.scrollToElement(dom);

12.由循环生成的this.$refs是一个数组

13.定义一个量change,通过this.$emit向父组件city.vue传值e.target.innerText,
    父组件通过<v-alpha :letters="letterCities" @change="letterChange"></v-alpha>接受子组件的传值,
    父组件在把值通过属性传值的方法传递给子组件lists.vue
    即间接实现兄弟组件的传递

14. 通过一次性定时器实现函数节流,即滑动时没16ms执行一次,让执行的频率不那么快,从而实现代码优化

15. vuex的使用:如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,
    您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,
    Vuex 将会成为自然而然的选择;
    
步骤:15.1  安装vuex:npm install vuex --save ;
      15.2  src文件夹下创建一个store文件夹用于处理vuex;
      15.3  在store文件夹下创建index.js;
      15.4 在index.js里写:
              import Vue from "vue"
              import Vuex from "vuex"
            
            Vue.use(Vuex);   //vue里面使用插件(如vuex)都是通过Vue.use(插件名)
            
            export default new Vuex.Store({  //创建new Vuex.Store仓库,并导出export
                state:{   //存放全局公用的数据
                    city:"重庆",     //首页头部显示的城市,默认为重庆
                },
                actions:{   //接受模块通过this.$store.dispatch传递过来的changeCity=item的数据,ctx.commit表示把该数据名和值传递给mutations
                    changeCity(ctx,item){
                        ctx.commit("changeCity",item)
                    }
                },
                //注释:如果是this.$store.commit传递过的数据,可以直接不需要actions,从而直接通过mutations处理修改state的值
                mutations:{   //接受actions通过ctx.commit传递的数据并处理,即修改state里面的city让其等于item
                    changeCity(state,item){
                        state.city=item;
                    }
                }
            })
      15.5 在main.js中:
              import store from "./store"
              new Vue({
              el: '#app',
              router,
              store,
              components: { App },
              template: '<App/>'
            })
      15.6  在模块中{{this.$store.state.city}}即可使用;
      15.7  修改store中的数据:this.$store.dispatch("changeCity",item);给vuex的store仓库的actions派发一个名字为changeCity,值为item的数据传递给store
            如果是this.$store.commit("changeCity",item)可以直接给vuex的store仓库不需要actions,从而直接通过mutations处理修改state的值

16.localStorage本地存储:
        let defaultCity='重庆';  
        try{    //避免用户禁止了localStorage,会报错
            if(localStorage.city){
                defaultCity=localStorage.city
            }
        }catch(e){}
        
        export default  new Vuex.Store({
            state:defaultCity,     //首页头部显示的城市,默认为localStorage.city或者重庆
        })

17. keep-alive优化代码,避免重复发送ajax获取重复数据,keep-alive缓存重复的数据:
    <keep-alive exclude="组件name名">            //exclude="组件name名"表示该组件不需要缓存,即每次跳转到页面都重新加载mounted生命周期
          <router-view/>
      </keep-alive>
      在<router-view/>标签外部包裹一层keep-alive标签,即可缓存,即在vue中增加了activated生命周期(在页面初始化mounted挂载完成,或者跳转回当前页面时,执行该生命周期函数),
       activated(){ //因为keep-alive而多出来的生命周期,即页面初始加载时和mounted一样执行,且在每次页面跳转返回当前页面时,仍然会执行,但是mounted因为在keep-alive下不会执行了
          if(this.lastCity !== this.city){   //即跳转回当前页面时,如果选择的城市发生改变,则再次发生ajax,否则就不发生ajax
              this.lastCity=this.city;   
              this.getHomeInfo();   
          }
      }

18. <router-link tag="li" :to="'/default/'+list.id"></router-link>这种写法,避免了a标签改变了li表示内里的文字颜色,相当于<li></li>且自带跳转页面的功能。 
<router-link tag="div" :to="."></router-link>   其中to="."表示返回上一页
 
19. 路由带参数传值:
    {
      path: '/detail/:id',
      component: Detail
    }
20. vue页面的滚动事件:window.addEventListener("scroll",this.headerScroll,true)添加true有时候才能触发滚动事件,页面滚动距离始终为0,
    可能原因是body,html有overflow:hidden属性    ,删除即可。
    activated(){   //当前组件页面显示的时候触发该生命周期,因为window是全局的,在其他页面滚动时也会触发,所以需要在当前页面隐藏或者被其他页面替换时,移除滚动事件
        window.addEventListener("scroll",this.headerScroll,true)
    },
    deactivated(){//当前组件页面隐藏/或被其他页面替换的时候触发该生命周期
        window.removeEventListener("scroll",this.headerScroll,true)
    }
    
21. vue中的递归组件:即组件里面调用组件自己本身;
    通过name:" detailComponent"名,去调用<detail-component :list="参数"></detail-component>
    
22. vue组件的name名称的作用:
        (1)递归组件时,作为标签名 < name-compontent></name-compontent>
        (2)该组件不需要缓存时也需要用到    <keep-alive exclude="组件name名"> <router-view/></keep-alive>
        
        
23.  避免当前页面滚动到底部,跳转到其他页面时也在底部:
     在vue项目的router->index.js中:
    export default new Router({
      routes: [
        {
          path: '/',
          component: Home
        },{
          path: '/city',
          component: City
        },{
          path: '/detail/:id',
          component: Detail,
        },
        {
          path: '/pics',
          component: Pics
        }],
       scrollBehavior (to, from, savedPosition) {   //vue-router的滚动行为,避免当前页面滚动到底部,跳转其他页面时也在底部
          return { x: 0, y: 0 }
        }
    })

24. vue项目的动画组件:
    (1.)新建一个动画组件anim.vue:  <transition><slot></slot></transition>
    (2.)然后在style里面定义.v-enter,.v-leave-to,.v-enter-active,.v-leave-active动画个个时刻的样式。
    (3.)在其他组件用引入该动画组件,然后将需要执行动画效果的标签包裹在该动画组件标签中即可。

25. vue项目的接口联调:即将模拟的json数据改成从服务器获取数据:
    步骤:在config->index.js下:
            dev: {
                assetsSubDirectory: 'static',
                assetsPublicPath: '/',
                proxyTable: {
                    "/api":{
                        target:"http://localhost:80", // 将此改为服务地址,即发送/api的ajax会从该地址获取数据
                    }
                },

26. vue项目打包上线:进入该项目的命令行,输入npm run build,会生成dist文件,然后将该文件里内容放在服务上,如放在xampp->htdocs根目录文件夹下

原文链接:https://blog.csdn.net/qq_42231156/article/details/82949939

移动端vue2.5去哪儿项目-常见问题整理的更多相关文章

  1. H5项目常见问题汇总及解决方案(果断复制粘贴,不解释)

    H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" co ...

  2. H5项目常见问题

    转自 https://github.com/FrontEndZQ/HTML5-FAQH5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面//一.HTML页 ...

  3. H5项目常见问题汇总及解决方案

    H5项目常见问题汇总及解决方案 H5   2015-12-06 10:15:33 发布 您的评价:       4.5   收藏     4收藏 H5项目常见问题及注意事项 Meta基础知识: H5页 ...

  4. Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面

    制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开 ...

  5. Vue2+VueRouter2+webpack 构建项目实战(二):目录以及文件结构

    通过上一篇博文<Vue2+VueRouter2+webpack 构建项目实战(一):准备工作>,我们已经新建好了一个基于vue+webpack的项目.本篇文章详细介绍下项目的结构. 项目目 ...

  6. h5前端项目常见问题汇总

    原文作者:FrontEndZQ 原文链接:https://github.com/FrontEndZQ/HTML5-FAQ H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度 ...

  7. 总结- H5项目常见问题汇总及解决方案(转)

    H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" co ...

  8. 【数据售卖平台】—— Vue2.0入门学习项目爬坑

    前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...

  9. 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...

随机推荐

  1. 将爬取的实习僧网站数据传入HDFS

     一.引言: 作为一名大三的学生,找实习对于我们而言是迫在眉睫的.实习作为迈入工作的第一步,它的重要性不言而喻,一份好的实习很大程度上决定了我们以后的职业规划. 那么,一份好的实习应该考量哪些因素呢? ...

  2. 本地git工作流

    一:add后的回退代码 1.在原有已经的基础上,又新增加了一个小需求 经过修改,添加到暂存区. 这个时候,会存在modified文件: 2.然后,又说需求不需要存在了 可以进行丢弃 在reset后,需 ...

  3. WMS开发环境

    须安装以下三个软件: JASPER报表开发工具:TIB_js-studiocomm_6.5.1.final_windows_x86_64.exe UI开发工具:Studio_7.0.0.0_win32 ...

  4. Spring cloud微服务安全实战-6-10sentinel之热点和系统规则

    热点规则 热点就是经常访问的数据.很多时候我们希望争对某一些热点数据,然后来进行限制.比如说商品的信息这个服务,我们给它做一个限流,qps是100,某一天我想做一个秒杀活动,可能会有很大的流量,这个时 ...

  5. django:资源网站汇总

    Django REST framework官网 http://www.sinodocs.cn/ django中文网 https://www.django.cn/

  6. dubbo问题集合

    背景:用于整理在开发过程中遇到的相关问题. Dubbo Server的时候出现“Will not attempt to authenticate using SASL (unknown error)” ...

  7. [05]Go设计模式:建造者模式(Builder Pattern)

    目录 建造者模式 一.简介 二.代码 三:参考资料 建造者模式 一.简介 建造者模式(Builder Pattern)使用多个简单的对象一步一步构建成一个复杂的对象.这种类型的设计模式属于创建型模式, ...

  8. eNSP上配置RIPv2的认证

    实验拓扑图如下 首先我们对各个路由器及终端PC进行基本ip设置 然后我们在路由器上设置RIPv2协议  并添加要通告的网段 然后我们查看路由表查看路由器已经学到的路由 接下来我们用R3模拟攻击者 通过 ...

  9. Nginx反向代理+负载均衡简单实现(手动申请https证书,申请免费https证书,http强转https)

    背景:A服务器(192.168.1.8)作为nginx代理服务器B服务器(192.168.1.150)作为后端真实服务器 现在需要访问https://testwww.huanqiu.com请求时从A服 ...

  10. Maven 相关知识点解释

    在PC端上面关于Maven的安装等情况我这里就不再复述了,不懂的请自行百度谷歌. 今天聊一下Maven 里面的结构,及相关依赖解释. groupId,artfactId,version,type,cl ...