用vue3写一个商品后台管理系统的多规格页面

首先，我们需要在Vue CLI中创建一个新的项目:

vue create 商品后台管理系统

然后，我们安装所需的依赖:

npm install --save-dev vue-router
npm install --save-dev axios
npm install --save-dev element-plus

接下来，我们需要设置Vue Router，为多规格页面设置路由。在`src/router/index.js`中添加以下代码:

import { createRouter, createWebHistory } from 'vue-router'
import Product from '../views/Product.vue'
import ProductSpec from '../views/ProductSpec.vue'

const routes = [
  {
    path: '/',
    name: 'Product',
    component: Product
  },
  {
    path: '/product/:id/spec',
    name: 'ProductSpec',
    component: ProductSpec,
    props: true
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

在这里，我们定义了两个路由，一个是商品列表页面(Product)，另一个是商品多规格页面(ProductSpec)，并且我们使用了路由传参来传递商品的id。

接下来，我们需要创建两个组件: `Product.vue`和`ProductSpec.vue`。

在`src/views/Product.vue`中，我们可以使用Element Plus中的Table组件来展示商品列表。

<template>
  <div>
    <el-table :data="products" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <router-link :to="{ name: 'ProductSpec', params: { id: row.id } }">查看多规格</router-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Product',
  data() {
    return {
      products: []
    }
  },
  created() {
    axios.get('/api/products').then(response => {
      this.products = response.data
    })
  }
}
</script>

在这里，我们使用了Axios来获取商品列表，并将其展示在Table组件中，同时通过`<router-link>`来添加一个路由链接，当用户点击时，会跳转到多规格页面，并将商品id作为参数传递。

接下来，在`src/views/ProductSpec.vue`中，我们可以使用Element Plus中的Form组件来展示商品的多规格。

<template>
  <div>
    <el-form :model="spec" label-width="120px">
      <el-form-item label="商品名称">
        <el-input :value="product.name" disabled></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input-number v-model="spec.price"></el-input-number>
      </el-form-item>
      <el-form-item label="规格">
        <el-select v-model="spec.size" placeholder="请选择">
          <el-option v-for="size in sizes" :key="size" :label="size" :value="size"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="颜色">
        <el-radio-group v-model="spec.color">
          <el-radio v-for="color in colors" :key="color" :label="color">{{ color }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'ProductSpec',
  props: ['id'],
  data() {
    return {
      product: {},
      spec: {
        price: 0,
        size: '',
        color: ''
      },
      sizes: ['S', 'M', 'L'],
      colors: ['红色', '蓝色', '绿色']
    }
  },
  created() {
    axios.get(`/api/products/${this.id}`).then(response => {
      this.product = response.data
      this.spec = this.product.spec || this.spec
    })
  }
}
</script>

在这里，我们使用了Axios来获取商品信息，并在Form组件中展示多规格的相关信息。同时，我们还定义了规格的尺寸和颜色的选项，用户可以从中选择。

最后，在`src/main.js`中，我们需要设置Axios的基础URL，以便获取数据:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000/'

createApp(App).use(router).mount('#app')

现在，我们已经完成了商品后台管理系统的多规格页面。