数据展示系统前端小结

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跳转传参：

有两种方式可以传递参数

1. 使用name和params，传递参数不出现在url中，但界面刷新后会消失

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

2. 使用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');