一灼芭、先將vue.min.js，antd.min.js般又、moment.js彼绷、antd.min.css等文件下載到本地；
二倒源、在vue代碼里面引入antd組件苛预；
三句狼、在具體的html頁面應(yīng)用笋熬；
代碼如下：
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8" />
? ? <title>大屏幕設(shè)計(jì)器</title>
? ? <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
? ? <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.js"></script>
? ? <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>?
? ? ?<link rel="stylesheet" type="text/css" />
</head>
<body>
? ? <div class="bddp-home pad24-backF" id="home">
? ? ? ? <div class="home-right">
? ? ? ? ? ? <div class="current-Name"><span class="mark"></span><span class="menu-itemName">大屏幕報(bào)表</span></div>
? ? ? ? ? ? <div class="hl-header">
? ? ? ? ? ? ? ? <div class="hl-btns">
? ? ? ? ? ? ? ? ? ? <input-search placeholder="請輸入關(guān)鍵字搜索" style="width: 200px" @search="onSearch" v-model="searchParams">
????????????????????</input-search>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="hl-btns">
? ? ? ? ? ? ? ? ? ? <a-button type="primary" icon="plus" id="newBddpBtn" class="mr24 blueBtn">新建</a-button>
? ? ? ? ? ? ? ? ? ? <a-button type="primary" icon="upload" class="border-btn-blue" id="importBddpBtn">導(dǎo)入</a-button>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? ? <script >
????????????????new Vue({
? ? ????????????????????el: '#home',
? ? ????????????????????data: function() {
? ? ? ????????????????????????? return {
? ? ? ? ? ????????????????????????? searchParams: ''
? ? ? ? ????????????????}
? ????????????? },
? ? ????????????created() {
? ? ? ????????????????? console.log(antd)//需要使用的組件可以打印出來查看名稱,使用組件時(shí)，注意要標(biāo)簽閉合腻菇，不能寫成<a-icon type="step-backward" />,正確的是<a-icon?type="step-backward"></a-icon>
? ? ????????????},
? ? ????????????methods: {
? ? ? ????????????????? onSearch() { }
? ? ????????????}
? ? ? ? ?})
????</script>
</body>
</html>
