<template> <div id="app"> <!-- <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> --> <GoodsList @click="onClick"/> <GoodsDetail01 v-show="active === 'GoodsDetail01'" /> <GoodsDetail02 v-show="active === 'GoodsDetail02'" /> </div> </template> <script> import GoodsList from './components/goodsList.vue'; import GoodsDetail01 from './components/goodsDetail01.vue'; import GoodsDetail02 from './components/goodsDetail02.vue'; // import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', data(){ return{ active: 'GoodsList' }; }, methods:{ onClick(name){ this.name = name; } }, components: { // HelloWorld, // GoodsList, // GoodsDetail01, // GoodsDetail02 } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>这样写报错Module not found: Error: Can't resolve 'process' in 'D:\VueWorkSpace\goods-vue\src\components'

这个错误通常是因为您的项目使用了 webpack 的 resolve.fallback 配置，而在新版本的 webpack 中，这个配置默认不包含 process 模块。您可以尝试在 webpack 配置文件中添加以下代码来解决这个问题：

module.exports = {
  // ...
  resolve: {
    fallback: {
      "process": require.resolve("process/browser")
    }
  }
};

如果您使用的是 Vue CLI 创建的项目，可以在 vue.config.js 文件中添加以下代码：

module.exports = {
  configureWebpack: {
    resolve: {
      fallback: {
        "process": require.resolve("process/browser")
      }
    }
  }
};

相关问题

<template> <div id="app"> <!-- <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> --> <GoodsList @click="onClick"/> <GoodsDetail01 /> <GoodsDetail02/> </div> </template> <script> import GoodsList from './components/goodsList.vue'; import GoodsDetail01 from './components/goodsDetail01.vue'; import GoodsDetail02 from './components/goodsDetail02.vue'; // import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', data(){ return{ active: 'GoodsList' }; }, methods:{ onClick(name){ this.name = name; } }, components: { // HelloWorld, GoodsList, GoodsDetail01, GoodsDetail02 } } </script>怎么改成展示主页Goodslist，点击主页列表图片实现跳转到其他页面

你可以在 `GoodsList` 组件中添加一个点击事件，然后在该事件中触发路由跳转，具体操作如下：

1. 在 `GoodsList` 组件中添加点击事件 `handleClick`，并传递当前商品的 id：

<template>
  <div class="goods-item" @click="handleClick(goods.id)">
    <img :src="goods.imgUrl" alt="" />
    <div class="goods-name">{{ goods.name }}</div>
    <div class="goods-price">{{ goods.price }}</div>
  </div>
</template>

<script>
export default {
  props: {
    goods: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleClick(id) {
      this.$router.push(`/goods/${id}`);
    }
  }
};
</script>

2. 在 `App` 组件中，将 `GoodsList` 组件作为默认展示的组件，并在 `onClick` 方法中更新 `active` 属性：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import GoodsList from "./components/goodsList.vue";

export default {
  name: "App",
  components: {
    GoodsList
  },
  data() {
    return {
      active: "GoodsList"
    };
  },
  methods: {
    onClick(name) {
      this.active = name;
    }
  }
};
</script>

3. 在路由文件中，配置路由规则：

import Vue from "vue";
import VueRouter from "vue-router";
import GoodsDetail01 from "./components/goodsDetail01.vue";
import GoodsDetail02 from "./components/goodsDetail02.vue";
import GoodsList from "./components/goodsList.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    component: GoodsList
  },
  {
    path: "/goods/:id",
    component: GoodsDetail01
  },
  {
    path: "/goods/:id/detail",
    component: GoodsDetail02
  }
];

const router = new VueRouter({
  routes
});

export default router;

以上是一个简单的跳转实现，你可以根据需求进行进一步的开发和优化。

<template > <div class="product-wrap" > <div class="product" v-for="product in products" :key="product.id" @click="handleClick(product.id)"> <img :src="product.image" alt="" > <div> <span>{{ product.name }}</span> <h4>￥{{ product.price }}</h4> </div> <component :is="currentComponent"></component> </div> </div> </template> <script> export default { name: 'GoodsList', data() { return { products: [ { id: 'GoodsDetail01', name: '多普勒效应马克杯', price: 35.50, image: require('../assets/1_DopplerEffect_多普勒效应_White.png') }, { id: 'GoodsDetail02', name: '透镜成像公式马克杯', price: 40.99, image: require('../assets/3_LensEquation_透镜成像公式_White.png') }, { id: 3, name: '黑洞温度马克杯', price: 32.00, image: require('../assets/5_BlackHoleTemperature_黑洞温度_White.png') }, { id: 4, name: '爱因斯坦场方程马克杯', price: 45.00, image: require('../assets/6_EinsteinFieldEquations_爱因斯坦场方程_White.png') } ], currentComponent: null } }, methods:{ // handleClick(){ // this.$emit('click', 'GoodsDetail01') //点击后跳转到 GoodsDetail01 页面 // } handleClick(id) { this.currentComponent = id } } } </script> <style> .product-wrap { width: 1200px; margin: 50px auto; display: flex; justify-content: space-between } .product { border: 1px solid #ececee; border-radius: 5px; cursor: pointer; transition: .5s; } .product:hover { border: 1px solid #979797; box-shadow: 0px 0px 7px #979797; } .product img { width: 270px; padding: 10px; border-bottom: 1px solid #ececee; } .product>div { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; } </style>goodslist商品主页点击跳转到goodsdetail01和goodsdetail02,不能用路由写出vue.app和goodslist全部代码

这里是一个简单的实现，包含了 Vue 实例、GoodsList 组件和 GoodsDetail01/02 组件的代码：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>GoodsList</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <goods-list></goods-list>
  </div>

  <template id="goods-list">
    <div class="product-wrap">
      <div class="product" v-for="product in products" :key="product.id" @click="handleClick(product.id)">
        <img :src="product.image" alt="">
        <div>
          <span>{{ product.name }}</span>
          <h4>￥{{ product.price }}</h4>
        </div>
      </div>
    </div>
  </template>

  <template id="goods-detail-01">
    <div>
      <h2>Goods Detail 01</h2>
      <button @click="$emit('back')">Back</button>
    </div>
  </template>

  <template id="goods-detail-02">
    <div>
      <h2>Goods Detail 02</h2>
      <button @click="$emit('back')">Back</button>
    </div>
  </template>

  <script>
    Vue.component('goods-list', {
      template: '#goods-list',
      data() {
        return {
          products: [
            {
              id: 'GoodsDetail01',
              name: '多普勒效应马克杯',
              price: 35.50,
              image: require('../assets/1_DopplerEffect_多普勒效应_White.png')
            },
            {
              id: 'GoodsDetail02',
              name: '透镜成像公式马克杯',
              price: 40.99,
              image: require('../assets/3_LensEquation_透镜成像公式_White.png')
            },
            {
              id: 3,
              name: '黑洞温度马克杯',
              price: 32.00,
              image: require('../assets/5_BlackHoleTemperature_黑洞温度_White.png')
            },
            {
              id: 4,
              name: '爱因斯坦场方程马克杯',
              price: 45.00,
              image: require('../assets/6_EinsteinFieldEquations_爱因斯坦场方程_White.png')
            }
          ],
          currentComponent: null
        }
      },
      methods: {
        handleClick(id) {
          if (id === 'GoodsDetail01') {
            this.currentComponent = 'goods-detail-01'
          } else if (id === 'GoodsDetail02') {
            this.currentComponent = 'goods-detail-02'
          }
        }
      }
    })

    Vue.component('goods-detail-01', {
      template: '#goods-detail-01'
    })

    Vue.component('goods-detail-02', {
      template: '#goods-detail-02'
    })

    new Vue({
      el: '#app'
    })
  </script>

  <style>
    .product-wrap {
      width: 1200px;
      margin: 50px auto;
      display: flex;
      justify-content: space-between;
    }

    .product {
      border: 1px solid #ececee;
      border-radius: 5px;
      cursor: pointer;
      transition: .5s;
    }

    .product:hover {
      border: 1px solid #979797;
      box-shadow: 0px 0px 7px #979797;
    }

    .product img {
      width: 270px;
      padding: 10px;
      border-bottom: 1px solid #ececee;
    }

    .product > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
    }
  </style>
</body>
</html>

这里没有使用路由，而是根据点击的商品 ID，动态渲染不同的组件。点击后会进入 GoodsDetail01 或 GoodsDetail02 组件，通过 `back` 事件返回主页。