去旅行App 练习记录

Posted 2020-11-09 言叶以上のBLOG

一、首页Header的开发

1.stylus使用

• 设计图 750 px ，是iphone6 的2倍图设计稿
• 使用 stylus 方便我们快速的编写 CSS 代码，stylus 是一种CSS预处理语言
• npm install stylus --save
• npm install stylus-loader --save （stylus-loader 可以将 stylus 语言转换成原生 css）
• 新建Header.vue 设置

  export default {name: ‘Home‘)

• 在Home.vue中引入

• import HomeHeader from ‘./components/Header‘

   并且声明该局部组件

• component: {HomeHeader}

   关于样式：使用stylus语言，只对当前组件有效

• <style lang="stylus" scpoed>

   iconfont 引入图标

• 通过webpack对文件路径进行简化，进入build=>webpack.base.conf.js，缩写路径： reslove.alias 内添加 ‘styles‘: resolve(‘src/assets/styles‘),

 

遇到的问题：

下次运行项目会遇到 stylus报错的问题。

原因，package.json 缺失依赖，不能解析stylus

解决方法：执行 npm install stylus-loader css-loader style-loader --save

 

二、首页轮播图

1.创建分支，在分支开发完毕会合并到master主分支上

• git pull (把线上分支拉到本地)
• git checkout index-swiper (修改本地的分支为新建的那个分支)
• git status (查看本地的分支)

2.轮播图插件插件 vue-awesome-swiper

• npm install vue-awesome-swiper --save (默认最新版)

• npm install [email protected] --save (安装稳定的版本)

• 在main.js中引入

• import Vue from ‘vue‘
  import VueAwesomeSwiper from ‘vue-awesome-swiper‘
  
  // require styles
  import ‘swiper/dist/css/swiper.css‘
  
  Vue.use(VueAwesomeSwiper, /* { default global options } */)

   

   

三、图标区域页面布局

　　写样式，此阶段没什么难点

四、图标区域逻辑实现

1. 图标分类轮播效果

• 打开 swiper.vue
• 给要滚动的组件包裹 <swiper :options="swiperOption"> 与 <swiper-slide> 标签，一个<swiper-slide>为一页
• 实现上下区域都能滑动，需要将.swiper-container 的宽高设定为和 .icons一样，使用样式穿透符 "<<<" ，可以修改不属于本页组件的样式
• 关闭自动滚动参数 ：swiperOption: {autoplay: false},

2.合并线上分支

//同步线上仓库分支
git add .
git commit -m ‘add icons‘
git push

//切换到master分支
git checkout master
//合并
git merge origin/index-icons
git push

 

五、推荐区域

写样式，此阶段没什么难点

 

六、Ajax 获取首页数据

推荐 vue-axios

整个首页发送一个Ajax 请求

• 引入：import axios from ‘axios‘

• methods: {
            getHomeInfo: function() {
              axios.get(‘/api/index.json‘)
                .then(this.getHomeInfoSucc)
            },
            getHomeInfoSucc: function() {
              console.log(res)
            }
          },
  mounted () {
            this.getHomeInfo()
          }

   

• 整个项目中 只有static 目录下的内容可以被外部访问到
• 进入 config/index.js  添加 proxyTable 进行api替换，可以做到线上本地api 自动切换

  proxyTable: {
        ‘/api‘: {
          target: ‘http://localhost:8080‘,
          pathRewrite: {
            ‘^/api‘:‘/static/mock‘
          }
        }

   

七、城市选择页面路由配置

better-scroll 使用

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- you can put some other DOMs here, it won‘t affect the scrolling -->
</div>

 

//初始化
mounted () {
      this.scroll = new Bscroll(this.$refs.warpper)
}

 

 

遇到的问题，加载后无法滚动 ，刷新后可滚动

情况一：

原因：当数据是动态渲染时，在没有渲染出来的情况会视为scollBox的高度为0，因此要在渲染完成后执行 better-scroll的refresh 操作。因为此时高度因为新数据发生改变，需要重置 better-scroll 

//mounted函数  
  this.$nextTick(()=>{
                  if (!this.scroll) {
                    this.scroll = new BScroll(this.$refs.rongqi, {
                      click: true
                    });
                  } else {
                    this.scroll.refresh();
                  };
            });

 

情况二：

以PC模式打开页面，按F12后切换移动端无法滚动。

解决方法：切换移动端后，按F5 以移动端模式重新加载即可。

 

八、兄弟组件间联动

子传父，父传弟的形式

 

九、使用Vuex实现数据共享

 遇到的问题：模块莫名其妙的丢失

目前解决办法是 手动删除 node_modules文件夹，之后进行 npm install 重新安装

VUEX的使用

 

十、城市保存

localStorge本地存储 

state: {city: localStorage.city || ‘上海‘},
mutations: {
    localStorage.city = city
}

 

使用keep-alive 优化网页性能

遇到的问题：

每次切换路由时，Ajax 都会发送请求

解决方法： 在App.vue 文件的 <router-view>标签外包裹一层 <keep-alive> ，下次请求时会将已存储的内容从内存中取出即可，实质是不再执行mounted 周期函数

 

十一、详情页动态路由及 banner 布局

 

十二、公共图片画廊组件拆分

 

遇到的问题，

页面拖动会互相影响 解决滚动行为

https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

在router/index.js 文件中 routes下面添加

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

 

作用：每一次做页面切换时，让先进入的页面X轴为0 Y轴也为0，（始终回到最顶部）

 

十三、真机测试

1. 通过 ipconfig 命令获取本地IP （我的是 192.168.1.105:8080）
2. 进入 package.json 在 "dev" 内添加 "--host 0.0.0.0" 即可使用手机在内网访问 

解决手机低版本浏览器白屏不支持 promise 的问题

• npm install babel-polyfill --save
• 在 main.js 中引入 "import ‘babel-polyfill"

十四、打包上线

前后端联调：

修改 config/index.js 下的 proxyTable

proxyTable: {
      ‘/api‘: {
        target: ‘http://localhost:8080‘, //前端模拟数据形式
        pathRewrite: {
          ‘^/api‘:‘/static/mock‘
        }
      }
    },

 

修改为：

proxyTable: {
      ‘/api‘: {
        target: ‘http://localhost:80‘ //后端从80端口返回数据
      }
    },

 

 

遇到的问题：

Vue 打包后运行 index.html 网页一片空白

解决方法：修改 config 文件夹下的index.js

设置assetsPublicPath: ‘./‘