####安裝antd-vue並按需加載(詳見 https://www.antdv.com/docs/vue/use-with-vue-cli-cn/ )css
一、yarn add ant-design-vue
二、yarn add babel-plugin-import
三、babel.config.js文件
module.exports = {
presets: ["@vue/app"],
+ plugins: [
+ [
+ "import",
+ { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css"} //注意官網這裏是style:true,這可能會致使報錯。建議使用style:"css"
+ ]
+ ]
};
四、src/main.js
import {Button,Switch} from 'ant-design-vue'
Vue.use(Button).use(Switch)
五、使用
<a-button type="primary">哈哈哈</a-button>
<a-switch defaultChecked />
####若不想按需加載antd-vue，想一次性所有引入vue
以上第3步：
將：{ libraryName: "ant-design-vue", libraryDirectory: "es", style: "css"}
改成：{ libraryName: "Antd", libraryDirectory: "es", style: "css"} //提醒：這裏style:"css"可改成style:true且不會報錯,這樣改後會加載包裏的less文件而非css文件。不改也沒影響
以上第4步：所有改成
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
而後重啓項目便可，請務必重啓項目。
####antd表格的使用（包括自定義表格列，表格分頁，vue中的對象格式與react的不一樣）react
<template>
<a-table
:columns="columns" //二、綁定columns,提醒：columns不只要自定義，並且以後還須要在data裏註冊
:dataSource="personList"
bordered
:rowKey="record=>record.pid" //四、表格的每一列必須有一個key值
:pagination="pagination" //七、設置分頁，這裏pagination是在data裏定義的一個對象
>
<div slot="pimg" slot-scope="text,record"> //六、經過slot='pimg'綁定。經過slot-scope="text,record"能夠動態獲取數據給自定義的標籤，但前提是必須在columns裏配置了scopedSlots
<img :src="record.pimg"/>
<a-button @click="bigImg(record.pimg)">查看大圖</a-button>
</div>
<div slot="operations" slot-scope="text,record">
<a-button @click="personEdit(record.pid)">編輯</a-button>
<a-popconfirm :title='`肯定刪除人物"${record.pname}"的信息？`' okText="肯定" cancelText="取消" @confirm="deletePerson(record.pid)">
<a-button>刪除</a-button>
</a-popconfirm>
</div>
</a-table>
</template>
<script>
const columns = [ //一、定義表格Header數據columns
{
title: '姓名',
dataIndex: 'pname', //此處命名有講究，要與渲染的數組裏的屬性名一致(如personList裏是pname，這裏就要用pname，不可用cname,name等)
key:'pname',
},
{
title: '圖片',
dataIndex: 'pimg',
key:'pimg',
scopedSlots:{customRender:'pimg'}, //五、這裏設置了scopedSlots:{customRender:'pimg'}以後，表格部分便可經過slot='pimg'綁定，而後去自定義標籤及樣式。並可經過sloct-scope獲取動態數據
},
{
title:'操做',
dataIndex:'operations',
key:'operations',
scopedSlots:{customRender:'operations'},
}
];
export default {
name:'Demo',
data(){
let self=this //八、改變this指向供分頁配置數據使用
return{
personList:[], //人物列表數據
columns, //三、這裏必須註冊columns
pagination:{ //九、分頁配置(這是一個對象格式的數據)
page:1,
pageSize:10,
total:0,
onChange:(page,pageSize)=>self.pageChange(page,pageSize),
}
}
},
created(){
this.getPersonList()
}
methods:{
//初始化時獲取列表數據
getPersonList(){
this.$axios.get(`${common.base}/admin/getPersonList?page=${this.pagination.page}&pagesize=${this.pagination.pageSize}`).then(res=>{
if(res.data.code==200){
if(res.data.data.list){
this.personList=res.data.data.list
this.pagination.total=res.data.data.allsize
//如下是頁面改動的兼容處理(好比刪除第3頁最後一條數據後，第3頁將無數據，則在刪除函數執行成功後再將page-1，設置page爲2，再去請求getPersonList()函數。便可實現刪除第3頁最後一條數據後，跳轉至第2頁)
if(res.data.data.list.length==1&&this.pagination.page>1){
this.pagination.page-=1
}
}
}else if(res.data.code==401){
this.$message.warning("登陸超時，請從新登陸！")
this.$router.push({name:'Login'})
}
}).catch(err=>{})
},
//翻頁時執行此函數
pageChange(page,pageSize){ //十、分頁函數
this.pagination.page=page //翻頁時，賦值更改表格分頁顯示
this.$axios.get(`${common.base}/admin/getPersonList?page=${page}&pagesize=${pageSize}`).then(res=>{
if(res.data.code==200){
if(res.data.data.list){
this.personList=res.data.data.list
//如下是頁面改動的兼容處理(同上)
if(res.data.data.list.length>1){
this.pagination.page=page
}else if(res.data.data.list.length==1&&page>1){
this.pagination.page=page-1
}
}
}
}).catch(err=>{})
},
//刪除人物
deletePerson(pid){
this.$axios.post(`${common.base}/delPerson?pid=${pid}`).then(res=>{
if(res.data.code==200){
this.$message.success(`人物 ${pname} 信息刪除成功！`)
this.getPersonList() //刪除成功後調用此函數獲取人物列表信息
}
}).catch(err=>{})
},
}
}
</script>
vue中對象方式和react的不一樣：vue中 :pagination="{page:1,pageSize:10,total:0}" react中 pagination={{page:1,pageSize:10,total:0}} 區別：vue中須要v-bind綁定，且包裹方式是""。
表格分頁可看博客：https://www.wandouip.com/t5i370008/
####解決瀏覽器緩存致使異步請求後頁面不更新的問題ios
通常在請求靜態資源的時候，瀏覽器檢測不是新數據的話，則會從緩存中讀取而不會去進行更新，從而致使後臺提交數據後前臺不更新的問題。
解決方法1：ctrl+shift+delete呼出瀏覽器緩存選項，清除緩存便可。但這樣的操做對用戶不友好，不推薦
解決方法2：控制檯中Network裏選中Disable cache使瀏覽器不保存緩存，僅適合開發人員用。
解決方法3：在請求接口的時候帶上隨機數或者時間戳便可(推薦使用)
getContent(content){
this.$axios.get(`${common.base}/getDemoList?t=${Math.random()}`).then(res=>{ //添加隨機數 `t=${Math.random()}` 或 時間戳 `t=${new Date().getTime()}`
this.demoList=res.data.list
}).catch(err=>{})
},
####router路由在新窗口打開頁面vue-router
goIndex(){
let goIndex=this.$router.resolve({name:'Index'}) //這裏要用resolve方式。 push,go方式無效
window.open(goIndex.href,'_blank')
}
####解決vue路由跳轉報錯 
vue-cli
緣由：據翻看大佬的解釋，vue-router ≥3.0版本回調形式以及改爲promise api的形式了，返回的是一個promise，若是沒有捕獲到錯誤，控制檯始終會出現如圖的警告
解決：在pages/router/router.js 即路由頁面添加如下代碼
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
+ const routerPush = VueRouter.prototype.push
+ VueRouter.prototype.push = function push(location) {
+ return routerPush.call(this, location).catch(error=> error)
+ }