DOCSEARCHbyAlgolia
Submit Docs

v3-admin Documentation

website·Indexed 31 days ago

https://dev.trinapower.com

A Vue 3 admin template featuring a comprehensive set of components and guides. It includes wrappers around antv for Table, Form, Modal, Drawer, and Tree components, as well as specialized tools like FlowChart (based on LogicFlow), CodeEditor, and Excel import/export. The documentation covers project setup with pnpm and Node.js, internationalization via I18n-ally, dark theme configuration, role-based access control, and deployment strategies.

Tokens
89.6K
Snippets
476
Records
616
Agent score
50%

What's inside v3-admin

  1. Overview of the v3-admin technical stack

    v3-admin
    The v3-admin project is built on a modern frontend stack designed for immediate use (out-of-the-box). The core technologies include Vue 3, Pnpm, Vite, Pinia, and WindiCSS.

  2. Overview of File Management Plugins

    The system utilizes two primary plugins for file operations:

    • cordova-plugin-file: Used for reading and writing files on the local device.
    • cordova-plugin-file-transfer: Used for uploading and downloading files between the device and a remote server.

  3. Overview of npm (Node Package Manager)

    npm is the default package manager for Node.js, installed automatically with the Node.js runtime. It facilitates JavaScript development by allowing developers to share and reuse code through packages (modules). Key capabilities include:

    • Downloading third-party packages from the npm registry for local use.
    • Installing command-line tools written by others.
    • Publishing custom packages or CLI tools to the npm registry for public or private use.
    • Managing project dependencies via the package.json file.

  5. Overview of Cordova File Management Plugins

    The system utilizes two primary plugins for file operations:

    1. cordova-plugin-file: Used for reading and writing files to the local device file system.
    2. cordova-plugin-file-transfer: Used for transferring files (uploading and downloading) between the device and a remote server.

  6. Overview of v3-admin-template

    v3-admin-template
    v3-admin-template is an out-of-the-box backend solution for medium to large-scale projects. It is built using Vue 3.0, Vite, Ant-Design-Vue, and TypeScript. Key features include second-level encapsulated components, utility functions, hooks, dynamic menus, permission validation, and button-level permission control.

  7. Overview of git subtree

    git subtree allows a repository to be embedded as a sub-repository within another. Version management for each repository remains relatively independent, making the sub-repository transparent to the end-user. A key feature is branch synchronization: when the main project branch is switched, the associated sub-repository also switches accordingly.

  8. Overview of the Xin Tian Fu Tong (新天富通) Agent Platform

    Xin Tian Fu Tong (新天富通) is a one-stop digital service platform designed for Trina Solar agents. It aims to improve business management and expansion efficiency by providing digital tools to solve operational management issues. Key functional modules include: full-process quality management, financial submission audit management, order processing, warehousing and logistics management, inspection management, and after-sales management.

  10. Understand the MVH architectural pattern

    The MVH pattern is used to separate concerns within a component's implementation into three distinct layers:

    1. Model (*.ts): Responsible for data transformation and assembly. Use this layer for tasks such as formatting data for edit forms or handling data echoing/hydration.
    2. Hook: Responsible for view-layer interaction logic. These are treated as utility functions and do not need to strictly follow standard Vue hook specifications. Use this layer for interaction logic, such as cascading dropdowns in a form.
    3. View (Template): Responsible exclusively for the presentation and display logic of the UI.

  11. Manage Git Hooks with Husky

    v3-admin
    Husky is used to run linting checks locally before code is committed. Hooks are defined within the .husky directory. If a check fails, the commit will be blocked until the issues are resolved.

  12. Implement a Modal as a standalone component

    v3-admin
    To maintain clean architecture, it is recommended to define the Modal content as a separate single-file component. The component must wrap its content in BasicModal and bind $attrs to ensure props passed from the parent are applied to the modal.
    <template>
  <BasicModal v-bind="$attrs" title="Modal Title" :helpMessage="['Tip 1', 'Tip 2']">
    Modal Info.
  </BasicModal>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { BasicModal } from '/@/components/Modal';

export default defineComponent({
  components: { BasicModal },
  setup() {
    return {};
  },
});
</script>