Vue脚手架小练习（购物车）

简单小案例

效果图

实现

App.vue

cart.vue

main.js

// 任意两个组件传递;
// 父子组件通过props传递, 如果组件没有明显的父子关系  使用总线机制进行传递;
// vue每个实例都有订阅 / 发布模式的实现, 使用$on和$emit来使用;

// 修改Vue原型
Vue.prototype.$bus = new Vue();

vue.config.js

module.exports = {
  // mock数据
  // 简单的mock，使用自带的webpack-dev-serve即可，新建vue.config.js扩展webpack设置
  // 访问http://localhost:8080/api/goods看到mock的数据

  configureWebpack: {
    devServer: {
      before(app) {
        app.get("/api/goods", (req, res) => {
          return res.json({
            code: 0,
            list: [
              { text: "百万年薪架构师", price: 100 },
              { text: "web全栈架构师", price: 80 },
              { text: "Python爬虫", price: 60 },
            ],
          });
        });
      },
    },
  },
};