Can ant-design vue be used?

ant design vue can be used. ant design vue is a high-quality UI component library implemented using Vue that follows the Ant Design design specifications and is used to develop and serve enterprise-level mid- and back-end products.

The operating environment of this article: windows10 system, vue 2.9, thinkpad t480 computer.

Recommended: "vue tutorial"

Ant Design Vue is a high-quality UI component library implemented using Vue that follows the Ant Design design specifications and is used to develop and serve Enterprise-level mid- and back-end products.

Features

Extracted from the interactive language and visual style of enterprise-level mid- and back-end products.

High quality Vue components out of the box.

Share the Ant Design of React design tool system.

Supported environment

Modern browsers and IE9 and above (requires polyfills).

Support server-side rendering.

Installation

Use npm or yarn to install

We recommend using npm or yarn for development, which not only allows easy debugging in the development environment, but also You can safely package and deploy it in the production environment and enjoy the many benefits brought by the entire ecosystem and tool chain.

$ npm install ant-design-vue --save
$ yarn add ant-design-vue

If your network environment is not good, it is recommended to use cnpm.

The component library uses vue's new features slot-scope (new in 2.5.0), provide / inject (new in 2.2.0)

Browser introduction

Use script and link tags to directly introduce files in the browser, and use the global variable antd.

We provide antd.js antd.css and antd.min.js antd.min.css in the ant-design-vue/dist directory in the npm release package. You can also download it through https://www.jsdelivr.com/package/npm/ant-design-vue or UNPKG.

It is strongly not recommended to use built files, which cannot be loaded on demand, and it is difficult to obtain quick bug fix support for underlying dependent modules.

Note: You need to introduce moment yourself before introducing antd.js.

Example

import Vue from 'vue'
import { DatePicker } from 'ant-design-vue';
Vue.component(DatePicker.name, DatePicker)

Introducing styles:

import 'ant-design-vue/dist/antd.css';  // or 'ant-design-vue/dist/antd.less'

Loading on demand

The following two methods can load only the components used.

Use babel-plugin-import (recommended).

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

Note: webpack 1 does not need to set libraryDirectory.

Then just import the module from ant-design-vue, there is no need to introduce the style separately. It is equivalent to the manual introduction method below.

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'ant-design-vue';

Manual introduction

import DatePicker from 'ant-design-vue/lib/date-picker';  // 加载 JS
import 'ant-design-vue/lib/date-picker/style/css';        // 加载 CSS
// import 'ant-design-vue/lib/date-picker/style';         // 加载 LESS

About ant-design-vue

As we all know, Ant Design was launched as a design language and has gone through many years of iterations And accumulated, its UI design ideas have become a set of de facto standards, sought after and loved by many front-end developers and enterprises, and it is also a magic weapon in the hands of React developers. I hope ant-design-vue can allow Vue developers to enjoy the excellent design of Ant Design.

ant-design-vue is the Vue implementation of Ant Design. The style of the component is synchronized with Ant Design. The html structure and css style of the component are also consistent. It truly achieves zero modification of the style, and the component API is also kept as much as possible. Consistent.

Ant Design Vue is committed to providing programmers with a pleasant development experience.

The above is the detailed content of Can ant-design vue be used?. For more information, please follow other related articles on the PHP Chinese website!