antDesignVue的使用

安装引入

npm install -g @vue/cli
vue create antd-demo
npm install ant-design-vue --save

1、按需加载(推荐) 完整组价列表

npm i babel-plugin-import --save
// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}
// 直接引入使用。babel-plugin-import 会帮助你加载 JS 和 CSS
import { Button, } from 'ant-design-vue';
Vue.use(Button);

全部组件

import { Button, Table, message, Icon, Tag, Divider } from 'ant-design-vue';
const components = [
  // Base,
  // Affix,
  // Anchor,
  // AutoComplete,
  // Alert,
  // Avatar,
  // BackTop,
  // Badge,
  // Breadcrumb,
  Button,
  // Calendar,
  // Card,
  // Collapse,
  // Carousel,
  // Cascader,
  // Checkbox,
  // Col,
  // DatePicker,
  Divider,
  // Dropdown,
  // Form,
  // FormModel,
  Icon,
  // Input,
  // InputNumber,
  // Layout,
  // List,
  // LocaleProvider,
  // Menu,
  // Mentions,
  // Modal,
  // Pagination,
  // Popconfirm,
  // Popover,
  // Progress,
  // Radio,
  // Rate,
  // Row,
  // Select,
  // Slider,
  // Spin,
  // Statistic,
  // Steps,
  // Switch,
  Table,
  // Transfer,
  // Tree,
  // TreeSelect,
  // Tabs,
  Tag,
  // TimePicker,
  // Timeline,
  // Tooltip,
  // Upload,
  // Drawer,
  // Skeleton,
  // Comment,
  // ColorPicker,
  // ConfigProvider,
  // Empty,
  // Result,
  // Descriptions,
  // PageHeader,
  // Space,
];

components.map(component => {
  Vue.use(component);
});

Vue.prototype.$message = message;
// Vue.prototype.$notification = notification;
// Vue.prototype.$info = Modal.info;
// Vue.prototype.$success = Modal.success;
// Vue.prototype.$error = Modal.error;
// Vue.prototype.$warning = Modal.warning;
// Vue.prototype.$confirm = Modal.confirm;
// Vue.prototype.$destroyAll = Modal.destroyAll;

2、全部引入

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);

配置eslint

关闭eslint
// vue.config.js

module.exports = {
    // lintOnSave: false,  //关闭eslint
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3300',
                // secure: false, // 默认情况下，不接受运行在 HTTPS 上
                pathRewrite: { '^/api': '' },  //重写api
                ws: false,
                changeOrigin: true //允许跨域
            }
        }
    },
}

修改主题色

所有默认样式变量
1、按需加载样式的情况

// .babelrc 中style改为true
{
    "plugins": [
        [
            "import",
            {
                "libraryName": "ant-design-vue",
                "libraryDirectory": "es",
                "style": true
            }
        ] // `style: true` 会加载 less 文件
    ]
}

// vue.config.js
	css: {
        requireModuleExtension: true,
        loaderOptions: {
            less: {
                modifyVars: {
                    // less vars，customize ant design theme
                    'primary-color': '#d6d30a',  //可以覆盖类名
                    // 'link-color': '#F5222D',
                    // 'border-radius-base': '4px'
                },
                javascriptEnabled: true
            }
        }
    }

2、不采用按需加载的方式，直接引入less文件

//APP.vue
<style lang="less">
@import "~ant-design-vue/dist/antd.less";
@import "./assets/reset.less"; 
</style>

// reset.less 用来覆盖样式
@primary-color: rgb(21, 255, 0);;
@border-color-base: #d6d30a; // 边框色

// vue.config.js 引入less会报错，需配置
	css: {
        requireModuleExtension: true,
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }

国际化：组件的多语言和自定义文字的多语言

1、组件实现多语言
npm i moment --save

// app.vue
<template>
//1、标签包裹，记得注册
// import {ConfigProvider} from 'ant-design-vue';
// Vue.component(ConfigProvider.name, ConfigProvider);//注册
  <a-config-provider :locale="locale"> 
    <div id="app">
    // 2、点击切换语言
      <div @click="lang">切换</div>
      <router-view />
    </div>
  </a-config-provider>
</template>
<script>
// 3、引入中文和韩语文件，默认是英文
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import koKR from "ant-design-vue/lib/locale-provider/ko_KR";
import moment from "moment";
// import "moment/locale/zh-cn";
// moment.locale("zh-cn");

export default {
  data() {
    return {
      locale: zhCN //修改默认中文
    };
  },
  methods: {
    // moment,
    //4、点击切换为韩语
    lang() {
      this.locale = koKR;
      moment.locale("ko-kr");
    }
  }
};
</script>

2、自定义静态文字：vue-i18n

在每次调用message之前，先销毁之前的message：

message.destroy();
message.error(‘要提示的信息’);