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