import { defineConfig }from 'win';export default defineConfig({  plugins: ['@winner-fed/plugin-vant'],  /**   *@name vant plugin   *@doc https://winjs-dev.github.io/winjs-docs/plugins/uiframework.html#vant   */  vant: {    // No need to configure this property when using `Vant4.x`    legacyFunction: ['Toast']  }});

Note

ThelegacyFunction property is designed to handle individual components inVant2.x that are provided as functions, includingToast,Dialog,Notify, andImagePreview components. When using function components,unplugin-vue-components cannot automatically import corresponding styles, so special handling is implemented (these special components will be globally imported in the generated plugin-vant/runtime.tsx, which has several benefits. Using Dialog as an example: 1) Prevents style issues, such as occasional animation anomalies when dialog pops up 2) Allows using this.$dialog in Vue files 3) Allows direct use of Dialog.alert(...) in JS files). The default value is []. The array only recognizesToast,Dialog,Notify,ImagePreview.

After configuring in the .winrc configuration file, you no longer need to import components and styles when using components in business code. For example:

// 1. Need to remove this explicit import- import { Dialog } from 'vant';// 2. Use in JS files (cannot be used directly in app.js) or in script tags of Vue filesDialog.confirm({  title: 'Title',  message: 'Dialog content',})  .then(() => {    // on confirm  })  .catch(() => {    // on cancel  });

Tip: You should not use "full import" and "on-demand import" simultaneously in a single project, as this will cause code duplication and style conflicts.

import { defineConfig }from 'win';export default defineConfig({  plugins: ['@winner-fed/plugin-antdv'],  /**   *@name ant-design-vue plugin   *@doc https://winjs-dev.github.io/winjs-docs/plugins/uiframework.html#antdv   */  antdv: {}});

import { defineConfig }from 'win';export default defineConfig({  plugins: [require.resolve('@winner-fed/plugin-element-ui')],  /**   *@name element-ui plugin   *@doc https://winjs-dev.github.io/winjs-docs/plugins/uiframework.html#elementui   */  elementUI: {}});

import { defineConfig }from 'win';export default defineConfig({  plugins: ['@winner-fed/plugin-element-plus'],  /**   *@name element-plus plugin   *@doc https://winjs-dev.github.io/winjs-docs/plugins/uiframework.html#elementplus   */  elementPlus: {}});

Note

When using component APIs in element-plus, such as ElMessage, ElMessageBox, ElNotification, ElLoading, you must manually import the corresponding component styles, for example:

// Manually import these stylesimport 'element-plus/es/components/message/style/css';import { ElMessage }from 'element-plus';

import { defineConfig }from 'win';export default defineConfig({  plugins: ['@winner-fed/plugin-winui'],  /**   *@name winUI plugin   *@doc https://winjs-dev.github.io/winjs-docs/plugins/uiframework.html#winui   */  winUI: {    // No need to configure this property when using `WinUI 3.x`    legacyFunction: ['Toast']  }});

Note

ThelegacyFunction property is designed to handle individual components inWinUI1.x that are provided as functions, includingToast,Dialog,Notify, andImagePreview components. When using function components,unplugin-vue-components cannot automatically import corresponding styles, so special handling is implemented. The default value is []. The array only recognizesToast,Dialog,Notify,ImagePreview.

After configuring in the .winrc configuration file, you no longer need to import components and styles when using components in business code. For example:

// 1. Need to remove this explicit import- import { Dialog } from '@winner-fed/win-ui';// 2. Use in JS files (cannot be used directly in app.js) or in script tags of Vue filesDialog.confirm({  title: 'Title',  message: 'Dialog content',})  .then(() => {    // on confirm  })  .catch(() => {    // on cancel  });

Tip: You should not use "full import" and "on-demand import" simultaneously in a single project, as this will cause code duplication and style conflicts.