Shulou(Shulou.com)05/31 Report--

This article mainly introduces the vue ant-design-vue components in how to install and use the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, with a certain reference value, I believe you will have a harvest after reading this article on how to install and use ant-design-vue components in vue, let's take a look.

1. Installation

First create the project using vue-cli, then enter the project and install the ant-design-vue library using npm:

Npm I-- save ant-design-vue@next

Then you see the library you just downloaded in the dependencies in the package.json file:

two。 Introduction of component library

Then introduce it in main.js, note that in order:

# introduce component library import ant from 'ant-design-vue'# and style sheet import' ant-design-vue/dist/antd.css'

The introduction sequence is shown in the figure:

Then you need to use the handle to the component library:

Then introduce the component library in the vue file to be used, for example, I want to use the component library in the default App.vue of the project:

Import 'ant-design-vue/dist/antd'

3. Use 3.1 button style

Just copy the code directly into the component tag, and note that only one root tag is allowed in the component tag.

3.2 Navigation Bar Styl

The navigation bar where you can select a color

Change Mode Change Theme Navigation One Navigation Two Navigation Three Option 3 Option 4 Option 5 Option 6 Navigation Four Option 7 Option 8 Option 9 Option 10 import {defineComponent Reactive, toRefs} from 'vue' Import {MailOutlined, CalendarOutlined, AppstoreOutlined, SettingOutlined,} from'@ ant-design/icons-vue';export default defineComponent ({setup () {const state = reactive ({mode: 'inline', theme:' light', selectedKeys: ['1'], openKeys: ['sub1'],}); const changeMode = checked = > {state.mode = checked? 'vertical':' inline';}; const changeTheme = checked = > {state.theme = checked? 'dark':' light';}; return {... toRefs (state), changeMode, changeTheme};}, components: {MailOutlined, CalendarOutlined, AppstoreOutlined, SettingOutlined,},})

Top navigation bar

Navigation One Navigation Two Navigation Three-Submenu Option 1 Option 2 Option 3 Option 4 Navigation Four-Link import {defineComponent, ref} from 'vue';import {MailOutlined, AppstoreOutlined, SettingOutlined} from' @ ant-design/icons-vue' Export default defineComponent ({setup () {const current = ref (['mail']); return {current,};}, components: {MailOutlined, AppstoreOutlined, SettingOutlined,},})

3.3 form style

Inline entry column

Log in import {UserOutlined, LockOutlined} from'@ ant-design/icons-vue';import {defineComponent, reactive} from 'vue';export default defineComponent ({setup () {const formState = reactive ({user:', password:',}); const handleFinish = values = > {console.log (values, formState);}; const handleFinishFailed = errors = > {console.log (errors);} Return {formState, handleFinish, handleFinishFailed,}; components: {UserOutlined, LockOutlined,},})

Supplement: compatibility of ant-design-vue

Problem: ant-design-vue is not compatible with ie browsers

Requirement: ie compatibility > = 9

Environment: vue cli3 build project, ant-design-vue@1.3.8

Babel.config.js file

Module.exports = {presets: ['@ vue/app', / / compatible configuration ['@ babel/preset-env', {'useBuiltIns':' entry'}]], / / load configuration plugins on demand: [['import', {libraryName:' ant-design-vue', libraryDirectory: 'es' Style: 'css'},]]}

Main.js file (project entry)

/ / introducing @ babel/polyfill processing compatible with import'@ babel/polyfill'import Vue from 'vue'import App from'. / App.vue'import router from'. / router/router'import store from'. / store/store'import'. / plugins/antd.js'new Vue ({router, store, render: h = > h (App)}). $mount ('# app') on "how to install and use ant-design-vue components in vue" ends here Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to install and use ant-design-vue components in vue". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.