DOCSEARCHbyAlgolia
Submit Docs

Liv Web Documentation

website·Indexed 29 days ago

https://taoyimin.github.io/docs

A Vue 3 component framework featuring automated data rendering components like DataTable, DataForm, and SearchForm. It provides a comprehensive suite of UI components including GridCascader, DictSelect, and VideoPlayer, along with built-in utilities for Excel generation, AES encryption, and form validation. The framework supports global property configuration, business logic injection via provide/inject, and custom directives such as v-authority.

Tokens
27.8K
Snippets
149
Records
259
Agent score
74%

What's inside Liv Web

  1. Overview of the Liv Web frontend framework

    Liv Web is a frontend development framework built on Vue and Element Plus. It provides a comprehensive set of development solutions aimed at simplifying the development process and increasing efficiency. Key architectural features include:

    • Non-intrusive: Enhances existing projects without altering their core structure.
    • Type Safety: Full TypeScript support for safer coding.
    • Flexible Imports: Supports full, on-demand, and automatic import methods.
    • Style Separation: Separates component libraries from style libraries, supporting the Sass precompiler.
    • Theming: Highly customizable theme configurations, including a built-in dark mode.
    • Developer Experience: Comprehensive documentation and editor code hints to reduce cognitive load.

  2. Generate and display QR codes using the QrCode component

    The QrCode component is used to generate and display QR codes. It is a wrapper around the Element Plus ElImage component, meaning it inherits all of ElImage's attributes, events, and slots.

  3. Project directory structure overview

    The project is organized as a monorepo with the following key directories:

    • dist: Build artifacts
    • docs: Documentation service
    • internal: Build modules (build, build-constants, build-utils)
    • packages: Core modules (components, constants, liv-web framework, theme-chalk styles, utils)
    • play: Development playground
    • plugins: Plugin modules (e.g., unplugin-liv-web for auto-imports)
    • scripts: Utility scripts
    • typings: Global type definitions

  4. Core features of the component library

    The library is designed with the following core principles and features:

    • Non-intrusive: Enhances existing functionality without altering the current project structure or causing side effects.
    • Type Safety: Full TypeScript support to ensure safer coding practices.
    • Flexible Imports: Supports full imports, on-demand imports, and automatic imports.
    • Style Separation: Component logic is separated from the style library, supporting the Sass preprocessor.
    • Theme Configuration: Highly customizable theme settings, including a built-in dark theme.
    • Developer Experience: Comprehensive documentation and editor code hints to reduce cognitive load during development.

  6. Use Data Card to unify form page layouts

    The Data Card component provides a consistent style and adaptive width/height for form pages. It is intended to wrap other layout components such as SearchForm, DataTable, and DataPagination to ensure a unified visual style without requiring custom CSS.

  7. Use Form Item for flexible form construction

    The Form Item component is used when the standard fields attribute of the DataForm component is insufficient for the required flexibility or personalization. It is based on ElFormItem and can quickly generate specific form controls by passing the fieldType property.

  8. Configure automatic on-demand import for Liv Web in Vite

    To optimize bundle size, use unplugin-vue-components and unplugin-liv-web to automatically import only the components and styles used in your project. First, install the required plugins via npm.
    npm install -D unplugin-vue-components unplugin-liv-web
    // vite.config.ts
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { LivWebResolver } from 'unplugin-liv-web/resolvers';

export default defineConfig({
  // ...
  plugins: [
    // ...
    Components({
      resolvers: [LivWebResolver()],
    }),
  ],
});

  10. Configure Data Card global properties

    You can set global default properties for all Data Card components using the DATA_CARD_KEY provider in your application setup.
    app.provide(DATA_CARD_KEY, {
  shadow: 'always',
  // other props...
});

  11. Update DataForm fieldData property to data

    In DataForm configuration, the fieldData property used for dynamically loading attributes in v1 has been renamed to data in v2.
    const data = [
  { label: '选项1', value: 1 },
  { label: '选项2', value: 2 },
];

const fields: DataFormFields = [
  {
    label: '选择器',
    prop: 'select',
    fieldType: 'select',
    // v1: fieldData: data,
    data: data,
  },
];

  12. Use Grid Tree for grid selection

    The Grid Tree component allows selecting grid areas. It supports multiple v-model bindings to track the selected item's value, ID, name, or the full data object. By default, it starts from the user's assigned grid, but can be configured to start from the root node using the root prop.