vxe-pc-ui

You can install the core component library using npm. If you also need the table or design components, you can install them together in a single command.

npm install vxe-pc-ui
# Or install the full suite:
npm install vxe-pc-ui vxe-table vxe-design

npm install vxe-pc-ui
# npm install vxe-pc-ui vxe-table vxe-design

To use vxe-pc-ui in a Vue application, import the base component library and its corresponding CSS file. You can then register it as a plugin using .use() during the app creation process.

Note: The library is designed to work alongside other related packages like vxe-table and vxe-design if needed.

import { createApp } from 'vue'
import App from './App.vue'
import VxeUIBase from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'

// Optional related packages:
// import VxeUITable from 'vxe-table'
// import 'vxe-table/lib/style.css'
// import VxeUIDesign from 'vxe-design'
// import 'vxe-design/lib/style.css'

createApp(App)
  .use(VxeUIBase)
  // .use(VxeUITable)
  // .use(VxeUIDesign)
  .mount('#app')

To use vxe-pc-ui in a Vue 3 project, import the base library and its corresponding CSS file, then register it using .use() in your application entry point.

If you are using additional packages like vxe-table or vxe-design, import and register them similarly.

// ...
import VxeUIBase from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'

// import VxeUITable from 'vxe-table'
// import 'vxe-table/lib/style.css'

// import VxeUIDesign from 'vxe-design'
// import 'vxe-design/lib/style.css'
// ...

createApp(App)
  .use(VxeUIBase)
  // .use(VxeUITable)
  // .use(VxeUIDesign)
  .mount('#app')

If you are working on the vxe-pc-ui source code itself, use the following commands to manage the project:

1. Install dependencies: npm install
2. Start local debugging/development server: npm run serve
3. Compile and package the library: npm run lib. This generates the compiled output in the es and lib directories.

# Install dependencies
npm install

# Start local debugging
npm run serve

# Compile packaging (generates es, lib directories)
npm run lib

To use the component library, import the base plugin and its corresponding CSS file, then register it with your Vue application instance using .use().

import VxeUIBase from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'

// If using related packages, you would also import them like this:
// import VxeUITable from 'vxe-table'
// import 'vxe-table/lib/style.css'
// import VxeUIDesign from 'vxe-design'
// import 'vxe-design/lib/style.css'

createApp(App)
  .use(VxeUIBase)
  // .use(VxeUITable)
  // .use(VxeUIDesign)
  .mount('#app')

The dynamicStore is a reactive object used to control the visibility and configuration of global UI elements. By modifying the properties of dynamicStore, you can programmatically trigger modals, drawers, loading overlays, watermarks, context menus, and tooltips.

import { dynamicStore } from 'vxe-pc-ui/dynamics';

// Example: Trigger a global loading state
dynamicStore.globalLoading = { /* VxeLoadingProps */ };

// Example: Open a modal
dynamicStore.modals.push({
  /* VxeModalDefines.ModalOptions */
});

// Example: Clear the loading state
dynamicStore.globalLoading = null;

In browser-based environments, vxe-pc-ui automatically exposes its exported components and utilities to the global window object. This allows for usage in environments where module imports might not be available or for quick prototyping. The following global variables are available:

• window.VxeUIAll
• window.VxeUIBase
• window.VxeUI

You can integrate the VxeDateRangePicker component into your Vue application using the install method or by registering it directly. The component is exported as VxeDateRangePicker and can also be imported as the default export or via the DateRangePicker alias.

To register it globally in a Vue app:

import { createApp } from 'vue'
import { VxeDateRangePicker } from 'vxe-pc-ui/packages/date-range-picker'

const app = createApp(App)
app.use(VxeDateRangePicker)
app.mount('#app')

import { App } from 'vue'
import { VxeDateRangePicker } from 'vxe-pc-ui/packages/date-range-picker'

// Global registration
app.use(VxeDateRangePicker)

You can install the VxeFormGroup component into your Vue application using the install method. This registers the component globally within the vxe-pc-ui dynamic app context and the core VxeUI registry.

To use it in a standard Vue 3 application, call app.use(VxeFormGroup).

import { createApp } from 'vue'
import { VxeFormGroup } from 'vxe-pc-ui'

const app = createApp(App)
app.use(VxeFormGroup)
app.mount('#app')

You can integrate the VxeTableTransfer component into your Vue application using the standard Vue plugin installation pattern. This registers the component globally within your application instance and the vxe-ui ecosystem.

Depending on your setup, you can use the install method on your Vue app instance or use the exported VxeTableTransfer object directly.

import { createApp } from 'vue'
import { VxeTableTransfer } from 'vxe-pc-ui'

const app = createApp({})...

// Register globally via the install method
app.use(VxeTableTransfer)