Vue.js高仿饿了么外卖App 2016最火前端框架(17h)

1. @2x 、@3x 的png小图片，拆分成单个。webpack在编译它们的时候会生成base64，这样一个图片请求都没有。同时也保证不同的dpr下使用相对应的图片。

2. 将svg图片，通过icomoon.io生成iconfont。步骤：左上角Import Icons ---> Generate Font ---> Preferences ---> Download。使用时只需要将fonts文件夹和样式引入即可。

3. 谷歌浏览器插件JSON Viewer可以友好地格式化网页的JSON数据。

4. mock数据

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后，需要手动重启项目，才能生效。

6. 在webpack3里，要运行scss文件，只需npm i -D node-sass sass-loader。

7. 编辑vue模板。文件夹下右键 ---> new ---> edit file templates。

8. flex经典布局。

.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. 设置路径的别名

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

14. 如何用手机测试页面？
    step1：保证手机和电脑在同一个局域网。
    step2：通过ifconfig查找主机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：在手机上输入http://192.168.1.122:8080即可在手机上看效果了。

15. 实现真正的1px的边框 border

问题

解决的问题是1像素的边框在某些移动设备中会显示过粗,主要原因是设备进行了放大,成为了2px;

解决

利用媒体查询和min-device-pixel-ratio 实现解决办法.

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>

这样引入会造成路径出错，报错如下。

 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" ，即可解决。