Vue DevUI: More than 100 contributors lasted more than 530 days and wrote nearly 60,000 lines of code. Wouldn't you like to try this freshly released Vue3 component library?

It has been 3 months since the first rc version of the Vue DevUI component library was released.

In the past 3 months, a total of 33 the owner participated in the polishing and optimization of components, and a total of 61 components 377 features and defects were optimized and repaired.

Vue DevUI has matured, everyone is welcome to experience and use it!

You can experience and use the components of Vue DevUI in the following ways:

• Method 1: Experience component interaction and vision through the official website Demo
• Method 2: Use components online through DevUI Playground
• Method 3: Use vue-devui by importing the CDN resource package
• Method 4: Use by installing vue-devui in the Vue3 project

Method 1: Experience component interaction and vision through the official website Demo

Vue DevUI official website address: https://vue-devui.github.io/

There is a big "D" on the left side of the picture on the homepage of the official website, which stands for DevUI, and there are some squares with various patterns next to them. These patterns are some common tools 🔧, which means that DevUI is a UI component focused on tool products. library.

There are two big buttons in the middle. Click the "Quick Start" button on the left to enter the quick start documentation page of the component library; click the button on the right to enter the Github source code repository of Vue DevUI.

Below the button is the profiler and link of the contributor.

We click the "Quick Start" button.

On the left side of the component documentation page is a categorized component navigation, click the component name to enter the corresponding component documentation.

We click the "Button button".

Each component page, from top to bottom, consists of the following parts:

• component title
• Component description
• Component usage scenarios
• Classified components Demo effects and codes
• API documentation for components
• Component contributors

Since the Vue DevUI component library is a Vue3 component library jointly built by community developers, we attach great importance to every contribution made by each contributor. There are READMEs in the Github repository, on the homepage of the official website, and at the bottom of each component document. Display contributor information.

Contributors come first. Their hard work has made Vue DevUI. We also hope that while Vue DevUI will build influence in the community in the future, our contributors will also benefit and build personal brand influence. In addition to gaining growth and honor in the Vue DevUI project, you can also gain certain influence and respect in the open source community.

Method 2: Use components online through DevUI Playground

If you feel that it is not enough to experience the components of Vue DevUI on the official website, and you want to use it yourself, it is very simple, just click the " Playground " link in the top bar of the official website document.

Here is the link to the DevUI Playground:

https://devcloudfe.github.io/devui-playground

Playground means "playground", which means that you can use the components of Vue DevUI yourself here.

The page has two main areas:

• code editing area
• Effect display area

You can use the Vue DevUI component directly in the code editing area, and you can see the effect of the component immediately after writing the effect display area on the right.

Is it very convenient, try it now!

DevUI Playground is an open source project developed by our PMC member Brenner . It has been contributed to DevUI's Github organization and has become an official DevUI open source project.

The following is the source address of the DevUI Playground project:

https://github.com/DevCloudFE/devui-playground

Welcome to light up our little star Star🌟

Method 3: Use vue-devui by importing the CDN resource package

If you are not satisfied with using Vue DevUI components in the drill field and want to use them in your own projects, then there is no problem at all.

We support the use of the Vue DevUI component library through CDN packages as follows:

Create a index.html file and write the following:

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 引入vue -->
  <script src="https://unpkg.com/vue@next"></script>

  <!-- 引入vue-devui -->
  <script src="https://unpkg.com/vue-devui"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-devui/style.css">

  <title>Vue DevUI Project</title>
</head>
<body>
  <div id="app"></div>
  <script>
    const app = Vue.createApp({
      template: `
        <d-button variant="solid">确定</d-button>
        <d-button>取消</d-button>
      `
    });

    // 引入vue-devui之后，会在全局暴露一个 VueDevui 对象，这是一个Vue插件，可以通过Vue实例的use方法进行注册，注册之后就可以直接使用 Vue DevUI 组件
    app.use(VueDevui.default).mount('#app');
  </script>
</body>
</html>

Open this html file directly with a browser, and you can see the component effect.

Method 4: Use by installing vue-devui in the Vue3 project

If you want to use the Vue DevUI component library in a real business, you can install the vue-devui npm package.

Let's first create a Vite project with the following command:

 npm create vite@latest vue-devui-project -- --template vue-ts

Next is to install the vue-devui component library and the supporting icon library:

 npm i vue-devui @devui-design/icons

You can refer to the quick start documentation on the Vue DevUI official website:

https://vue-devui.github.io/quick-start/

full import

The easiest way is to import all components in full, and write in the main.ts file:

 import { createApp } from 'vue'
import App from './App.vue'

import DevUI from 'vue-devui'
import 'vue-devui/style.css'
import '@devui-design/icons/icomoon/devui-icon.css'

createApp(App).use(DevUI).mount('#app')

After the introduction, you can use the Vue DevUI components directly!

Use the following d-button component in App.vue 78f8e0ba954f04cbb716936505df55b5---:

 <template>
  <d-button variant="solid">确定</d-button>
  <d-button>取消</d-button>
</template>

The effect is as follows:

Introduce on demand

In order to reduce the size of the product package and improve the performance of the application, Vue DevUI also supports the introduction of components on demand.

Write the following code in main.ts :

 import { createApp } from 'vue'
import App from './App.vue'

import Button from 'vue-devui/button'
import 'vue-devui/button/style.css'

createApp(App).use(Button).mount('#app')

There is no difference in use, directly use ---7117bef477cfff885ea4d1d05bce28a6 App.vue in d-button :

 <template>
  <d-button variant="solid">确定</d-button>
  <d-button>取消</d-button>
</template>

The effect is no different from the full introduction:

Welcome to experience and use the Vue DevUI component library 🥳

You are more welcome to join in and build together 🤝

For more stories about the Vue DevUI open source component library, please read our previous articles:

20 lines of code to add DevUI theme switching capability to your project

How to create a spec-compliant DevUI component in under 1 minute

The building blocks theory of front-end development - front-end development like building blocks

Build a warm open source community

The story of DevUI open source

Take you hand in hand to build a vue3 component library from 0 to 1: mini-vue-devui

Vue DevUI already has 10 component members

Let's build a Vue DevUI project together