从零开始使用 Create-Vue 搭建 Vue 后台管理系统：一步步走向成功

前端

2023-06-29 16:21:27

使用 Create-Vue 从头开始构建后台管理系统

在数字化时代，企业离不开功能齐全的后台管理系统。它简化了工作流程，提高了运营效率，并提升了用户体验。然而，构建这样的系统通常需要大量的开发时间和专业知识。

Create-Vue 的优势

Create-Vue 是一款基于 Vue.js 的脚手架工具，专为快速、轻松地构建各种 Vue 项目（包括后台管理系统）而设计。它的优势包括：

快速搭建： 提供预设模板，加快项目搭建。
功能丰富： 集成常用功能模块，满足多数企业需求。
易于扩展： 模块化设计，可轻松添加/删除功能。
代码简洁： 采用 Vue.js 开发，代码易读，便于维护/升级。

使用 Create-Vue 构建后台管理系统

1. 安装 Create-Vue

使用 npm 命令安装 Create-Vue：

npm install -g create-vue

2. 创建项目

创建新项目：

create-vue my-admin

3. 安装依赖

安装项目依赖：

cd my-admin
npm install

4. 启动项目

启动项目：

npm run dev

可在浏览器中访问 http://localhost:8080 查看项目。

5. 构建项目

开发完成后，构建项目：

npm run build

打包文件将在 dist 目录下。

6. 部署项目

将打包文件部署到服务器，以便用户访问后台管理系统。

代码示例

以下是一个简单的 Create-Vue 用户管理模块代码示例：

// 用户列表组件
<template>
  <div>
    <h1>用户列表</h1>
    <button @click="addUser">添加用户</button>
    <table border="1">
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>邮箱</th>
          <th>角色</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.role }}</td>
          <td>
            <button @click="editUser(user)">编辑</button>
            <button @click="deleteUser(user.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useApi } from '@/composables/api'

export default {
  setup() {
    const users = ref([])

    const api = useApi()

    const addUser = () => {
      // 添加用户逻辑
    }

    const editUser = (user) => {
      // 编辑用户逻辑
    }

    const deleteUser = (id) => {
      // 删除用户逻辑
    }

    return {
      users,
      addUser,
      editUser,
      deleteUser
    }
  }
}
</script>