1. 修改預設配置

vue.config.js

module.exports = {
  outputDir: 'docs',
  baseUrl: process.env.NODE_ENV === 'production' ? '/demo/' : '/'
}

官方文件： 具體配置

2. 去掉console.log提醒

package.json

"rules": {
  "no-console": "off"
},

3. 使用rem佈局

vue.config.js

const px2rem = require('postcss-px2rem')

const postcss = px2rem({
  remUnit: 75 //基準大小 baseSize，需要和rem.js中相同
})

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}
 

rem.js

(function(d, w) {
  const doc = d.documentElement
  function rem() {
    const width = Math.min(doc.getBoundingClientRect().width, 768);
    doc.style.fontSize = width / 7.5 + 'px'
  }
  rem()
  w.addEventListener('resize', rem)
})(document, window)

main.js

import './vendor/rem'

4. 路由設定 router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [{
    path: '*',
    redirect: '/home'
  },
  {
    name: 'home',
    component: () => import('../pages/home'),
    meta: {
      title: '首頁'
    }
  },
]

// add route path
routes.forEach(route => {
  route.path = route.path || '/' + (route.name || '')
})

const router = new Router({
  routes
})

router.beforeEach((to, from, next) => {
  const title = to.meta && to.meta.title
  if (title) {
    document.title = title
  }
  next()
})

export {
  router
}
 

main.js

import { router } from './router'

5. 購物車總價計算

利用 reduce 計算總價

// array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

var goods = [{
    title: '進口香蕉',
    price: 200,
  }, {
    title: '陝西蜜梨',
    price: 690,
  }, {
    title: '美國伽力果',
    price: 2680,
  }]

var totalPrize = goods.reduce(function (total, item) {
  return total + item.price
}, 0)
console.log(totalPrize)