仿写去哪儿网app--遇到的问题及说明总结

喜欢ヅ旅行 2022-02-01 14:53 169阅读 0赞

1. 移动端开发中的1px边框问题，由于在不同屏幕上，可能会使得1px实际在移动端显示不是1px,怎么解决?  
2. 移动端click点击事件，会延迟300ms,怎么解决？  
解决：引入第三方包,解决移动端click事件延迟300ms；  
    npm install fastclick --save;  
    在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">&\#xe624;</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" >  
              
            <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>

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. Bscroll使用方法：  
        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根目录文件夹下  
\---------------------   
作者：Ace.斗王   
来源：CSDN   
原文：https://blog.csdn.net/qq\_42231156/article/details/82949939   
版权声明：本文为博主原创文章，转载请附上博文链接！