移动端vue2.5去哪儿项目-常见问题整理

时间 2019-11-16

原文原文链接

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

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

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

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

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>便可显示该图标字体。ios

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

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

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

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" >
       
       <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>
       
       <div class="swiper-pagination" slot="pagination"></div>
       </swiper>vuex

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

解决方式：设置元素的宽高比值固定：
   .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