Vuetify Admin 技术文档

Vuetify Admin 技术文档

vuetify-admin SPA Admin Framework for Vue.js running on top of REST APIs and built on Vuetify 项目地址: https://gitcode.com/gh_mirrors/vu/vuetify-admin

安装指南

环境要求

• Node.js (推荐使用最新稳定版本)
• Vue CLI (推荐使用最新版本)

安装步骤

1. 安装 Vue CLI
   如果你还没有安装 Vue CLI，可以通过以下命令进行安装：

   npm install -g @vue/cli
   

2. 创建 Vue 项目
   使用 Vue CLI 创建一个新的 Vue 项目：

   vue create my-project
   cd my-project
   

3. 安装 Vuetify Admin
   在你的 Vue 项目中安装 Vuetify Admin：

   vue add vuetify-admin
   

4. 启动项目
   安装完成后，启动项目：

   npm run serve
   

项目使用说明

项目概述

Vuetify Admin 是一个基于 Vue.js 和 Vuetify 的单页应用（SPA）管理框架。它旨在通过 REST API 提供一个响应式的管理界面，适用于各种后端服务。

主要功能

• Vuetify 驱动：基于 Vuetify 框架，提供丰富的 UI 组件。
• 自定义数据和认证提供者：支持自定义数据和认证提供者，适用于各种后端服务。
• 最小化 Vue.js 样板代码：通过 DSL 方法，减少 CRUD 页面的样板代码。
• Vue CLI 插件：提供 Vue CLI 插件，快速启动项目。
• 国际化支持：支持多语言，包括英语和法语。
• 可组合布局：支持自定义布局，包括 AppBar、Header、Footer、Sidebar 和 Aside 区域。

使用示例

以下是一个简单的使用示例，展示如何创建一个 CRUD 页面：

<template>
  <va-list resource="posts">
    <va-list-item>
      <va-field name="title" label="标题" />
      <va-field name="content" label="内容" />
    </va-list-item>
  </va-list>
</template>

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

项目 API 使用文档

数据提供者

Vuetify Admin 支持多种数据提供者，包括 Laravel、API Platform 和 JSON Server。你可以通过以下方式配置数据提供者：

import { LaravelDataProvider } from 'vuetify-admin'

const dataProvider = new LaravelDataProvider({
  baseUrl: 'https://api.example.com'
})

认证提供者

Vuetify Admin 支持三种认证提供者：

• Cookie 认证：适用于 Laravel Sanctum。
• JWT 认证：适用于 Laravel JWT。
• 基本 HTTP 认证。

配置示例：

import { JwtAuthProvider } from 'vuetify-admin'

const authProvider = new JwtAuthProvider({
  loginUrl: 'https://api.example.com/login',
  logoutUrl: 'https://api.example.com/logout'
})

项目安装方式

通过 Vue CLI 插件安装

Vuetify Admin 提供了 Vue CLI 插件，可以快速安装和配置项目。使用以下命令安装插件：

vue add vuetify-admin

手动安装

如果你不想使用 Vue CLI 插件，也可以手动安装 Vuetify Admin：

1. 安装依赖：

   npm install vuetify-admin
   

2. 配置项目： 在你的 Vue 项目中配置 Vuetify Admin，包括数据提供者和认证提供者。

通过以上步骤，你可以轻松地安装和使用 Vuetify Admin 项目。

vuetify-admin SPA Admin Framework for Vue.js running on top of REST APIs and built on Vuetify 项目地址: https://gitcode.com/gh_mirrors/vu/vuetify-admin