vue-cli3+移动端开发到服务器部署记录

去哪网开发

初始化配置

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'.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