1. @2x 、@3x 的png小圖片，拆分成單個。webpack在編譯它們的時候會生成base64，這樣一個圖片請求都沒有。同時也保證不同的dpr下使用相對應(yīng)的圖片。

2. 將svg圖片，通過icomoon.io生成iconfont。步驟：左上角Import Icons ---> Generate Font ---> Preferences ---> Download。使用時只需要將fonts文件夾和樣式引入即可。

3. 谷歌瀏覽器插件JSON Viewer可以友好地格式化網(wǎng)頁的JSON數(shù)據(jù)。

4. mock數(shù)據(jù)

const sellData = require('../data.json')
const seller = sellData.seller
const goods = sellData.goods
const ratings = sellData.ratings

before(app) {
    app.get('/api/seller', function(req, res){
        res.json({
            errno: 0,
            data: seller
        })
    });
    app.get('/api/goods', function(req, res){
        res.json({
            errno: 0,
            data: goods
        })
    });
    app.get('/api/ratings', function(req, res){
        res.json({
            errno: 0,
            data: ratings
        })
     });
}

5. 修改.eslintrc.js后，需要手動重啟項(xiàng)目，才能生效。

6. 在webpack3里，要運(yùn)行scss文件，只需npm i -D node-sass sass-loader。

7. 編輯vue模板。文件夾下右鍵 ---> new ---> edit file templates。

8. flex經(jīng)典布局。

.tab{
  display: flex;
  .tab-item{
    flex: 1;
  }
} 

9. vue-loader下postcss插件，搞定css兼容性問題。

10. main.js里

new Vue({
  components：{App},
  template:'<App/>' 
    替換成 
  render: h=>h(App)
})

11. vue-router
    router文件夾里的index.js

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const routes = [{
  path: '/',
  redirect: '/goods'
}, {
  path: '/goods',
  component: goods
}, {
  path: '/ratings',
  component: ratings
}, {
  path: '/seller',
  component: seller
}];
export default new Router({
    linkActiveClass: 'active',
    routes
});

main.js

 import router from './router';
 new Vue({router})

App.vue

<div class="tab">
  <div class="tab-item">
    <router-link to="/goods">商品</router-link>
  </div>
  <div class="tab-item">
    <router-link to="/ratings">評論</router-link>
  </div>
  <div class="tab-item">
    <router-link to="/seller">商家</router-link>
  </div>
</div>

12. WebStorm快捷鍵 control+G 選中下一個相同的字符串； control+command+G 選中所有相同的字符串。

13. 設(shè)置路徑的別名

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'src': path.resolve(__dirname, '../src'),
    'common': path.resolve(__dirname, '../src/common'),
    'components': path.resolve(__dirname, '../src/components')
  }
}

14. 如何用手機(jī)測試頁面？
    step1：保證手機(jī)和電腦在同一個局域網(wǎng)。
    step2：通過ifconfig查找主機(jī)ip。
    step3：修改config文件下index.js。

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: '192.168.1.122', // can be overwritten
  }
}

step4：npm run dev。
step5：在手機(jī)上輸入http://192.168.1.122:8080即可在手機(jī)上看效果了。

15. 實(shí)現(xiàn)真正的1px的邊框 border

問題

解決的問題是1像素的邊框在某些移動設(shè)備中會顯示過粗,主要原因是設(shè)備進(jìn)行了放大,成為了2px;

解決

利用媒體查詢和min-device-pixel-ratio 實(shí)現(xiàn)解決辦法.

scss代碼如下:

@mixin border-bottom-1px($color){
  positon: relative;
  &:after{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid $color;
    content: ' ';
  }
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
}

@media(-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}

16. 在用 @import 'common/scss/index.scss'; 時，要注意樣式文件中路徑造成的加載錯誤。
    例如： Vue.app。

<style lang="scss">
  @import "common/scss/index";
</style>

這樣引入會造成路徑出錯，報(bào)錯如下。

 ERROR  Failed to compile with 4 errors                                                                                                                                 13:37:55

These relative modules were not found:

* ../fonts/sell-icon.eot?moblv1 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../fonts/sell-icon.svg?moblv1 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../fonts/sell-icon.ttf?moblv1 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../fonts/sell-icon.woff?moblv1 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue

我的解決方案是在 index.scss 里面不引入 mixin.scss 。在 main.js 里面 import "common/scss/mixin.scss" ，即可解決。