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中，若要在内部的html中使用v-for的参数，需要将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对象，用于获取后端数据，其中使用get方式时，数据参数的属性名为params，使用post方式时，数据参数的属性为data
export function postAction(url, params) {
return axios({
url,
method: 'post',
data: params
})
}
//发起get请求进入详情页
export function getAction(url, params) {
return axios({
url,
method: 'get',
params
})
}
6. 从后端获取数据时的proxy代理：
使用axios向后端获取数据时，会发生跨域的问题，可以在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跳转传参：
有两种方式可以传递参数
- 使用
name和params，传递参数不出现在url中，但界面刷新后会消失
router.push({ name: 'user', params: { userId: '123' }})
- 使用
path和query，传递的参数出现在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');
