去哪网开发

初始化配置

vue-cli初始化配置

• 脚手架安装

  yarn global add @vue/cli

• 创建项目

  yarn global add @vue/cli

• 路由安装

  yarn add vue-router

• scss安装

  yarn add sass-loader node-sass

• css初始化配置

  重置浏览器样式reset.css 移动端1px边框问题border.css 移动端点击事件延迟fastclick.js

• 移动端适配

  • lib-flexible+postcss-px2rem

    • 安装

      yarn add lib-flexible postcss-px2rem

    • 使用

      在main.js总引入import 'lib-flexible' 将项目/public/index.html中的设置视口的meta删除和注释删除 根路径创建vue.config.js，其中设置postcss-px2rem

    • vue.config.js设置

      module.exports = {
          css: {
              // 启用 CSS modules
              modules: false,
              // 是否使用css分离插件
              extract: true,
              // 开启 CSS source maps?
              sourceMap: false,
              // css预设器配置项
              loaderOptions: {
                  css: {},
                  postcss: {
                      plugins: [
                          //remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
                          //假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
                          require('postcss-px2rem')({
                              remUnit: 75
                          })
                      ]
                  }
              }
          }
      }
      
      
      

  • vh、vw方案

    • 安装

      yarn add -D postcss-px-to-viewport

    • vue.config.js配置

      
      module.exports = {
          css: {
              loaderOptions: {
                  postcss: {
                      plugins: [
                          require("postcss-px-to-viewport")({
                              viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750.
                              viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334.
                              unitPrecision: 3, // (指定`px`转换为视窗单位值的小数位数（很多时候无法整除).
                              viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw.
                              fontViewportUnit: "vw",
                              selectorBlackList: [], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名.
                              minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值.
                              mediaQuery: false, // 允许在媒体查询中转换`px`.
                              replace: true,
                              exclude: /(\/|\\)(node_modules)(\/|\\)/,
                          })
                      ]
                  }
              }
          }
      }
      

• axios

  • axios

    • 安装

      yarn add axios

    • 配置

      局部组建引入 import axios from 'axios' 请求axios.get('dsdsd') 全局引入，绑定到原型上（main.js） import axios from 'axios' Vue.prototype.axios = axios

首页

问题

• mock

  使用mock数据的时候，vue-cli2和vue-cli3的区别是，vue-cli3去除了static文件夹，现在静态资源我们都放到了public中

• swiper多图分页轮播展示错误

  使用计算属性，将原来一维数组换成2维数组，根据数组的长度/一页展示的内容 const pages = [] this.list.forEach((item, index) => { const page = Math.floor(index / 8) if (!pages[page]) { pages[page] = [] } pages[page].push(item) }) return pages

• swiper图片2页轮播

  使用计算属性，将原来一维数组换成2维数组，根据数组的长度/一页展示的内容 const pages = [] this.list.forEach((item, index) => { const page = Math.floor(index / 8) if (!pages[page]) { pages[page] = [] } pages[page].push(item) }) return pages

• 页面未加载出来，页面有数据后出现抖动效果

  问题 图片没加载出现高度是0，页面会有抖动， 解决 外层设置div标签将其包裹 width:100% height:0 overflow:hidden padding-bottom:图片的比例（高/宽）% 使用vh,vw width:100% height:(高/宽)vw

• UI组建穿透

  使用css的 /deep/去解决

• swiper默认显示的图片展示不对

  问题 由于当swiper还未ajax请求数据的时候，是由外层传入的空数组显示的 swiper是空数组创建的，所以默认显示最后一个 解决 加个数组的length判断，此处需注意，避免在节点的v-if中做过多逻辑判断，

优化

• 抽离全局样式
• 抽离公共css

列表页

betterScroll.js

使页面滚动更流畅

城市首字母滚动

首先获取A距离顶导的距离 this.$refs['A'][0].offsetTop; 获取手指滑动距离顶部的距离。 e.touches[0].clientY - 72(导航的高度) 当前索引（index） index=Math.floor((clientY - this.startY) / 17); 17是每个字母的高度

性能优化

• 使用update将固定数据保存起来，比如A元素距离顶部的距离。

• 采用截流函数（滑动改变位置+搜索的时候）

• keep-alive

  将已经加载过的数据存入内存，避免多次渲染消耗性能 使用后vue会多处2个生命周期钩子函数 activated deactivated在页面退出的时候去使用

• 页面使用vuex改变数据的时候，刷新数据无法保存？

  使用localstorge

vuex

数据都存放在state中 组建改变数据通过dispatch去触发actions函数 actions通过commit去通知mutations改变数据

• state

  相当于一个独立的储存空间，公共数据存放的地方 在组建中使用2种方式。 this.$store.state.xxx this.city

    	```					
    		import { mapState } from 'vuex'
  			computed: {
  		...mapState(['city'])
    		  },
    	```
  

• actions

  异步操作改变数据，批量操作放到这里，相当于一个事件触发器 使用方法： 组建触发通过this.$state.dispatch(''changeCIty,'item.name')

  import {mapActions} from 'vuex'
  	methods: {
     			handleCityClick (val) {
       		this.changeCity(val)
        		this.$router.push('/')
      },
      ...mapActions(['changeCity'])}
  

• mutations

  actions通过commit调用mutations，改变数据。

• Getter

  类似vue中的计算属性，比如同时用到state的数据，可以用getter做拆分，避免数据泰国冗余

• Module

  对于大型项目，页面数据量大的情况下，可以将每个组建所需要的数据单独拿出作为一个模块去使用。最后去拼合

nuxt框架中vuex写法修改

直接导出export const modules = { geo, home, user } 不需要在new Vuex.store（modules:{}）去定义了

性能优化

• 使用update将固定数据保存起来，比如A元素距离顶部的距离。

• 采用截流函数（滑动改变位置+搜索的时候）

• keep-alive

  将已经加载过的数据存入内存，避免多次渲染消耗性能 使用后vue会多处2个生命周期钩子函数 activated deactivated在页面退出的时候去使用

• 页面使用vuex改变数据的时候，刷新数据无法保存？

  使用localstorge

详情页开发

优化

• 异步组建实现按需加载

• 实现heade的渐隐渐显的内容

  设置2部分内容，通过v-show去判断展示哪一个， 渐隐渐显主要利用document.documentElement.scrollTop&&document.body.scrollTop去计算滚动的位置改变效果

• 对全局事件的解绑

  如果绑定在某一个组建的元素上面不会产生影响 但是绑定到了全局window上，无论在那个组建都会收到影响 在我们使用keep-aliveb包裹组建的时候，会有2个新增生命周期函数， activated(缓存被激活的时候使用) deactivated(组建被隐藏的时候去调用) window.removeEventListener（‘’）

• 使用递归组建实现详情页列表

问题

• 公共画廊组建使用swiper动态传数据页面滑动有问题

  • 原因

    一开始我们的组建除于一个隐藏的状态，再次将他展示出来的时候，swiper计算宽度会有问题，导致轮播图无法正常运行

  • 解决

    在swiperoptions上添加2个属性， observeParents:true, observer:true 当窗口发生变化时，更新swipe，监听到父级发生变化时，动态自我更新

部署服务器

配置生产环境静态资源路径

vue-cli3的vue.config.js里面配置了一个publicPath publicPath：""

服务器nginx配置

添加ssl证书

http转https