This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact.

Ant Design Vue is a library of high-quality UI components implemented using Vue and conforming to Ant Design specifications for developing and serving enterprise-level backend products.

Ant Design Vue Chinese document: www.antdv.com/docs/vue/in…

Making: github.com/vueComponen… Star: 15 k

features

  • The interactive language and visual style of enterprise level background products are refined.

  • High quality Vue components out of the box.

  • Use the Ant Design of React Design tool.

Supporting environment

  • Modern browsers and IE9 and above (polyfills required).

  • Support for server-side rendering.

The introduction of ant – design – vue

1. Install scaffolding tools

Open CMD and run as administrator

The following two commands are available, depending on which one you like to use.

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

Copy the code

2. Create a project

Initialize using the command line.

$ vue create antd-demo

Copy the code

I don’t want to create a project on drive C, so I’m going to create a new project on drive D for now. If you don’t have any requirements for the project, you can press Enter to install it by default

And configure the project.

If an error occurs during the installation, run the rm -rf node_modules && CNPM install command by using CNPM or another image source.

After initialization, open drive D to see ANTD-demo

perform

$ cd antd-demo
$ yarn serve
Copy the code

Open a browser and enter

- Local:   http://localhost:8080/
  - Network: http://192.168.199.181:8080/
Copy the code

You can see that the creation succeeded

3. Use components

Install ant – design – vue

$ npm i --save ant-design-vue

Copy the code

Use $CNPM I –save ant-design-vue if the installation is too slow

The installation is complete

Create a test.vue file under the Components folder, copy the code from the official Ant Design Vue documentation, and test it

<template> <div> <a-button type="primary"> Primary </a-button> <a-button>Default</a-button> <a-button type="dashed"> Dashed </a-button> <a-button type="danger"> Danger </a-button> <a-config-provider :auto-insert-space-in-button="false"> < A-button type="primary"> button </ A-button > </a-config-provider> < A-button type="primary"> button </ A-button > < A-button type="link"> Link </a-button> </div> </template>Copy the code

Introduce test.vue in app.vue

Use the navigation menu code www.antdv.com/components/…

<template> <div style="width: 256px"> <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed"> <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" /> </a-button> <a-menu :default-selected-keys="['1']" :default-open-keys="['sub1']" mode="inline" theme="dark" :inline-collapsed="collapsed" > <a-menu-item key="1"> <a-icon type="pie-chart" /> <span>Option 1</span> </a-menu-item> <a-menu-item key="2"> <a-icon type="desktop" /> <span>Option 2</span> </a-menu-item> <a-menu-item key="3"> <a-icon type="inbox" /> <span>Option 3</span> </a-menu-item> <a-sub-menu key="sub1"> <span slot="title"><a-icon  type="mail" /><span>Navigation One</span></span> <a-menu-item key="5"> Option 5 </a-menu-item> <a-menu-item key="6"> Option 6 </a-menu-item> <a-menu-item key="7"> Option 7 </a-menu-item> <a-menu-item key="8"> Option 8 </a-menu-item> </a-sub-menu> <a-sub-menu key="sub2"> <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span> <a-menu-item key="9"> Option 9 </a-menu-item> <a-menu-item key="10"> Option 10 </a-menu-item> <a-sub-menu key="sub3" title="Submenu"> <a-menu-item key="11"> Option 11 </a-menu-item> <a-menu-item key="12"> Option 12 </a-menu-item> </a-sub-menu> </a-sub-menu> </a-menu> </div> </template> <script> export default { data() { return { collapsed: false, }; }, methods: { toggleCollapsed() { this.collapsed = ! this.collapsed; ,}}}; </script>Copy the code

Open main.js and add Ant Design Vue js and CSS

Main.js is fully introduced

import Vue from 'vue'
import Antd from 'ant-design-vue'
import App from './App'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false

Vue.use(Antd)

new Vue({
  render: h => h(App),
}).$mount('#app')


Copy the code

The above code completes the introduction of Antd. Note that style files need to be introduced separately.

Run it again, and the component looks like this:

Enter the yarn serve command