1. 引入antd并使用：

在main.js中

import Antd from "ant-design-vue"
Vue.use(Antd)

也可以按組件的名稱進行引入

import { Button, Input, Table, Layout, ConfigProvider
} from 'ant-design-vue'
app.use(Button).use(Input).use(Form).use(Table)
.use(Layout).use(ConfigProvider)

2. antd框架使用中文：

在App.vue中導入中文插件(zhCN)，然后用<a-config-provider> 標簽包裹

<template>
    <a-config-provider :locale="locale">
        <div id="app">
            <router-view />
        </div>
    </a-config-provider>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
export default {
    data() {
        return {
            locale: zhCN
        }
    }
}

3. 關于less的安裝：

yarn add less
yarn add less-loader@5.0.0
安裝less-loader 5.0.0 版本是為了避免版本過高而出錯

4. v-for的注意事項：

在vue3中，若要在內(nèi)部的html中使用v-for的參數(shù)，需要將v-for綁定在外包裹的<template>標簽上

<template v-for="(value, key, idxPop) in pop">
    <div id="select" 
         v-if="show[index] && index === idxPop">
    </div>
</template>

5. axios的使用：

axios是一個promise對象，用于獲取后端數(shù)據(jù)，其中使用get方式時，數(shù)據(jù)參數(shù)的屬性名為params，使用post方式時，數(shù)據(jù)參數(shù)的屬性為data

export function postAction(url, params) {
  return axios({
    url,
    method: 'post',
    data: params
  })
}
//發(fā)起get請求進入詳情頁
export function getAction(url, params) {
  return axios({
    url,
    method: 'get',
    params
  })
}

6. 從后端獲取數(shù)據(jù)時的proxy代理：

使用axios向后端獲取數(shù)據(jù)時，會發(fā)生跨域的問題，可以在vue.config.js中進行proxy代理配置

devServer: {
  port: 3000,
  open: true,
  sockHost: 'localhost',
disableHostCheck: true, //webpack4.0 開啟熱更新
  // 代理
  proxy: {
'/apiPost': {
  target: 'http://10.10.50.59:18111/collection/getPageByCondition',
  changeOrigin: true,
  pathRewrite: {
    '^/apiPost': '',
  },
},
      '/apiGet': {
  target: 'http://10.10.50.59:18111/collection/getDetailById',
  changeOrigin: true,
  pathRewrite: {
    '^/apiGet': '',
  },
},
  },
},

7. 禁用ESLint：

在vue項目下新建vue.config.js文件，并設置：

module.exports = {
  lintOnSave: false
}

8. 對象的深拷貝：

使用JSON對象可以事項對象的深拷貝

let params = JSON.parse(JSON.stringify(this.queryParams));

9. router.push跳轉傳參：

有兩種方式可以傳遞參數(shù)

1. 使用name和params，傳遞參數(shù)不出現(xiàn)在url中，但界面刷新后會消失

router.push({ name: 'user', params: { userId: '123' }})

2. 使用path和query，傳遞的參數(shù)出現(xiàn)在url中，界面刷新不消失

router.push({ path: 'register', query: { plan: 'private' }})

接收可用this.$route.query或this.$route.params

this.$route.query.id
this.$route.params.id

10. router打開新空白頁進行跳轉：

可以使用this.$router.resolve

let routeData = this.$router.resolve({
    path: '/detail',
    query: {
        id,
    },
});
window.open(routeData.href, '_blank');