記一次vue實戰項目學習總結

項目準備

1. 使用reset.css重置樣式已達到多瀏覽器統一
2. 若是是手機端，會有一像素邊框的問題，即高分辨率屏幕border: 1px solid #000會出現實際顯示爲2px或3px，適用基於::before&::after僞類實現的border.css
3. 圖標元素用阿里巴巴的iconfont庫解決
4. 使用fastClick插件解決移動端300毫秒點擊延遲
5. 配置webpack.config文件的resolve來簡化文件路徑
6. style文件的添加config文件來設定全局主題（具體看css是用的什麼）
7. 初始化文件目錄 主要頁面歸類page文件夾，全局組件放common

開發階段

vue-router

• 在router-view外面嵌套keep-alive可讓路由被緩存，每次進入不會從新建立頁面，也就是說不會重複調用mounted生命鉤子，做爲代替會額外觸發activated生命鉤子，因爲跳出後頁面會被緩存，須要刷新信息的時候用
• 若是須要單獨設置頁面不被緩存，能夠在keep-alive標籤上添加屬性，exclude=""
• router-link不僅僅會被解釋成<a>標籤，經過添加tag屬性能夠指定能夠被解釋成其餘標籤類型<router-link tag="div"
• 在router路由配置文件中，若是把component寫成函數返回路徑的模式能夠獲得異步的路由component: () => import('<path>')（還有另一種，詳見文檔）,異步路由能夠減小首頁加載的文件大小，可是會有額外的http請求，因此在首屏速度和請求數量須要根據實際來取捨
• vue-router切換頁面時會繼承上個頁面的頁面滾動位置，在router根文件添加如下代碼能夠重置位置

scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
    // 頁面切換時 回到原點 只對hash模式起效
 }
複製代碼

• 動態路由的:xxx部分在this.$route.params下，不是在this.$router.params下，中這個招的可能只有我了QuQ

vuex

• 能夠跳過action直接調用mutations，僅僅在同步方法下適用，異步數據操做老老實實用active
• 可使用輔助函數mapState(),mapActions(),mapMutations()減小重複代碼輸入

雜項

• 動畫效果能夠經過單獨嵌套全局動畫組件，Vue會在組件進入脫出的合適時機個組件添加className
• vue-awesome-swiper 使用在手機端（android??）點擊事件失效，用的時候會阻止touch事件的鍋，在new Bscroll(this.$refs.wrapper)的第二個參數傳入配置對象{ mouseWheel: true, click: true, tap: true }就好了
• css屬性中默認height的百分比值並不能有效的被計算，由於html的高度能夠近乎無限，如何設置寬高等比的元素？可使用overflow: hidden; padding-bottom: 30%的方式來設置等比元素
• stylus中可使用 .select >>> .childSelect能夠穿透去影響全局樣式（慎用）
• static文件能夠被直接訪問而不會發生被vue-router跳轉，適合放置mock文件，在webpack下proxyTable設置相關路由劫持到指定路徑,好比

proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/static/mock'
        }
      }
    },
複製代碼

調試

真機調試

• 在package.json文件下的scripts中dev（就是開發環境的命令行）中加入 --host 0.0.0.0開啓局域網模式
• 經過終端輸入ipconfig(mac是ifconfig)獲得主機ip地址，使手機與電腦處於同一網絡下（通俗點就是同一個WiFi下）,輸入ip地址+端口號便可

打包

• 運行build打包的dist文件默認路徑是'/',若是須要修改打包路徑，在build配置項中有assetsPudlicPath:'<path>'能夠作相關配置

相關項目代碼

Trevel