How to install and use ant-design-vue components in vue
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.
