Ant Design是一個基于React開發的UI組件庫,而Ant Design Vue則是Ant Design的Vue版本,它提供了一些優雅簡潔的組件、模塊化、響應式設計方案。
這篇文章將會介紹如何使用Ant Design Vue開發一個簡單的前端項目,我們將會利用Vue.js、Vue CLI、Node.js和Webpack來完成整個項目。接下來我們將會按照以下的步驟進行操作:
<template> <div class="wrapper"> <a-button type="primary" @click="handleClick">點擊我</a-button> <img :src="imgSrc" alt="img"> </div> </template> <script> import { Button } from 'ant-design-vue'; export default { name: 'App', components: { 'a-button': Button }, data() { return { imgSrc: '' } }, methods: { async handleClick() { try { const response = await fetch('https://dog.ceo/api/breeds/image/random'); const data = await response.json(); this.imgSrc = data.message; } catch (e) { console.error(e); } } } } </script>
首先,我們需要在項目中引入Ant Design Vue的組件,可以通過NPM來安裝組件庫。運行以下命令:
npm install ant-design-vue --save
安裝完成后,我們在項目中引入Button組件。這里我們利用了組件的“v-on”指令來綁定按鈕的“click”事件,激活handleClick()函數,從而觸發動態獲取圖片的方法。
在handleClick()方法中,我們使用了ES6的async/await特性,對fetch()進行了異步處理。然后,我們將response對象轉換成json格式,將圖片的URL保存在imgsrc變量中。最后,我們在頁面中顯示出圖片。
現在,使用“npm run serve”命令來啟動Vue項目,用瀏覽器打開項目頁面,點擊Button按鈕,你就可以看到從網絡獲取的動態圖片了!
上一篇div 的html代碼
下一篇網頁主頁簡單css特效