Quick Start#

Before using View UI Plus, we encourage you to read guide of Vue.js first.

• Vue Component
• Single File Component

And understand the following concepts of Vue:

• props Transfer Data
• slots Content Distribution
• events Custom Event

We have prepared the basic project for you, and based on this project, you can save a lot of time in configuring and debugging the environment.

• View UI Plus Project (Based on Vue CLI)
• View UI Plus Project (Based on Vite)
• View UI Plus Project（Based on TypeScript）
• View UI Plus Project (Based on SSR Nuxt)

If you are using it, you are ready for developing and can skip the following part. We recommend it to you since it can save your time.

If you prefer not to use them or use other utilities, please keep reading.

Import View UI Plus in the entry file (main.js as usual) of webpack:

By using the babel-plugin-import, you can load components on demand and reduce the size of files. First installation, then update .babelrc file or babel-loader in webpack:

npm install babel-plugin-import --save-dev

// .babelrc or babel-loader
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "view-ui-plus",
        "libraryDirectory": "src/components"
      },
      "view-ui-plus"
    ]
  ]
}

Now you can import components like:

import { Button, Table } from 'view-ui-plus';
app.component('Button', Button);
app.component('Table', Table);

Partial import will only effect logic level; you still need to import all the styles, which means add import 'view-ui-plus/dist/styles/viewuiplus.css'; to main.js or the root component.

If not in template/render mode(such as using CDN), the component name must be separated, such as DatePicker should be date-picker.

The following components, if not in template/render mode, you need to add a prefix i-:

• Button: i-button
• Col: i-col
• Table: i-table
• Input: i-input
• Form: i-form
• Menu: i-menu
• Select: i-select
• Option: i-option
• Progress: i-progress
• Time: i-time