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)参考：reduce计算数组之和
