用vue写一个后台管理系统

作为AI语言模型，我不能运行代码，但我可以提供一个简单的Vue.js后台管理系统的框架供您参考:

1. 安装Vue CLI

npm install -g @vue/cli

2. 创建Vue项目

vue create my-admin-app

3. 安装需要的插件

npm install vue-router axios vuex --save

4. 创建路由

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Login from './views/Login.vue'
import Dashboard from './views/Dashboard.vue'
import Users from './views/Users.vue'
import Products from './views/Products.vue'
import Orders from './views/Orders.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      children: [
        {
          path: 'users',
          name: 'users',
          component: Users
        },
        {
          path: 'products',
          name: 'products',
          component: Products
        },
        {
          path: 'orders',
          name: 'orders',
          component: Orders
        }
      ]
    }
  ]
})

5. 创建Vuex store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isLoggedIn: false,
    user: null,
    users: [],
    products: [],
    orders: []
  },
  mutations: {
    login (state, user) {
      state.isLoggedIn = true
      state.user = user
    },
    logout (state) {
      state.isLoggedIn = false
      state.user = null
    },
    setUsers (state, users) {
      state.users = users
    },
    setProducts (state, products) {
      state.products = products
    },
    setOrders (state, orders) {
      state.orders = orders
    }
  },
  actions: {
    login ({ commit }, user) {
      commit('login', user)
    },
    logout ({ commit }) {
      commit('logout')
    },
    getUsers ({ commit }) {
      // make API call to get users
      const users = []
      commit('setUsers', users)
    },
    getProducts ({ commit }) {
      // make API call to get products
      const products = []
      commit('setProducts', products)
    },
    getOrders ({ commit }) {
      // make API call to get orders
      const orders = []
      commit('setOrders', orders)
    }
  }
})

6. 创建组件

- Home.vue

<template>
  <div>
    <h1>Welcome to my admin app</h1>
    <router-link to="/login">Login</router-link>
  </div>
</template>

- Login.vue

<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="login">
      <input type="email" v-model="email" placeholder="Email">
      <input type="password" v-model="password" placeholder="Password">
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    login () {
      // make API call to authenticate user
      const user = {}
      this.$store.dispatch('login', user)
      this.$router.push('/dashboard')
    }
  }
}
</script>

- Dashboard.vue

<template>
  <div>
    <h1>Welcome {{ user.name }}</h1>
    <button @click="logout">Logout</button>
    <nav>
      <router-link to="/dashboard/users">Users</router-link>
      <router-link to="/dashboard/products">Products</router-link>
      <router-link to="/dashboard/orders">Orders</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  computed: {
    user () {
      return this.$store.state.user
    }
  },
  methods: {
    logout () {
      this.$store.dispatch('logout')
      this.$router.push('/')
    }
  }
}
</script>

- Users.vue

<template>
  <div>
    <h1>Users</h1>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Role</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.role }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  computed: {
    users () {
      return this.$store.state.users
    }
  },
  mounted () {
    this.$store.dispatch('getUsers')
  }
}
</script>

- Products.vue

<template>
  <div>
    <h1>Products</h1>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.name }}</td>
          <td>{{ product.description }}</td>
          <td>{{ product.price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  computed: {
    products () {
      return this.$store.state.products
    }
  },
  mounted () {
    this.$store.dispatch('getProducts')
  }
}
</script>

- Orders.vue

<template>
  <div>
    <h1>Orders</h1>
    <table>
      <thead>
        <tr>
          <th>Customer</th>
          <th>Product</th>
          <th>Quantity</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="order in orders" :key="order.id">
          <td>{{ order.customer }}</td>
          <td>{{ order.product }}</td>
          <td>{{ order.quantity }}</td>
          <td>{{ order.total }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  computed: {
    orders () {
      return this.$store.state.orders
    }
  },
  mounted () {
    this.$store.dispatch('getOrders')
  }
}
</script>

7. 运行项目

npm run serve

这只是一个简单的框架，您可以根据需要添加更多的组件、页面和功能。