用vue3写一个商家后台管理系统

好的！下面是一个简单的商家后台管理系统示例：

首先，我们需要使用Vue CLI创建一个新项目：

vue create seller-admin

然后安装一些依赖：

npm install axios vue-router element-plus

在src目录下创建一个views文件夹，用于存放所有页面相关的组件。

在views文件夹下创建一个Dashboard.vue组件，作为系统的主页面：

<template>
  <div>
    <h1>商家后台管理系统</h1>
    <el-menu :default-active="$route.path" mode="horizontal">
      <el-menu-item index="/dashboard">仪表盘</el-menu-item>
      <el-menu-item index="/products">商品管理</el-menu-item>
      <el-menu-item index="/orders">订单管理</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Dashboard'
}
</script>

<style>
/* 样式省略 */
</style>

在views文件夹下创建一个Products.vue组件，用于显示所有商品的列表：

<template>
  <div>
    <h2>商品列表</h2>
    <el-table :data="products" style="width: 100%">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="stock" label="库存"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

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

<style>
/* 样式省略 */
</style>

在views文件夹下创建一个Orders.vue组件，用于显示所有订单的列表：

<template>
  <div>
    <h2>订单列表</h2>
    <el-table :data="orders" style="width: 100%">
      <el-table-column prop="id" label="订单号"></el-table-column>
      <el-table-column prop="amount" label="总金额"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

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

<style>
/* 样式省略 */
</style>

在src目录下创建一个router.js文件，用于设置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Dashboard from './views/Dashboard.vue'
import Products from './views/Products.vue'
import Orders from './views/Orders.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/dashboard'
  },
  {
    path: '/dashboard',
    component: Dashboard
  },
  {
    path: '/products',
    component: Products
  },
  {
    path: '/orders',
    component: Orders
  }
]

const router = new VueRouter({
  routes
})

export default router

在src目录下创建一个main.js文件，用于初始化Vue应用：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

Vue.use(ElementPlus)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

最后，在src目录下创建一个App.vue文件，用于显示整个应用：

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

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 样式省略 */
</style>

现在，我们可以运行应用：

npm run serve

然后在浏览器中打开 http://localhost:8080/ ，就可以看到商家后台管理系统的主页面了。