vue2引入antdesign报错汇总

由于项目需要，兼容IE，所以只能用vue2,且ant-design只能选用1版本

第一步：

　　1.查看vue/cli版本，我选用的是4.4.6

　　2. 创建项目 vue create writebg-project

　　选择自定义配置，并选择需要的选项

　　3.根据需要，选择是否需要历史路由

　　4.选择css预处理器，和代码美化

　　5.eslint代码检查

　　6.分开配置文件

　　7.是否保存上述配置

 此时回车项目正在创建,项目创建成功，出现如下内容进入项目，启动 

项目目录如下：

 

 第二部：引入ant-design

　　npm install ant-design-vue --save

注意：这里默认安装最新版本，所以，要是vue2或者vue/cli4.5以下版本，或者需要兼容IE。ant-design只能安装1版本。

　　　　所以最好：

　　npm install --save ant-design-vue@1.7.8

 　　一。全局引入：

　　在main.js中，添加如下代码

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 新增代码：引入全部组件及样式
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

// 新增代码：注册全部组件
Vue.use(Antd)
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

在单文件组件.vue 中，引用ant-design组件

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
      <a-button type="primary">Primary</a-button>
    </div>
  </div>
</template>

 运行项目，即可。

 二。按需引入：

　　首先安装依赖，按需引入对应组件样式。

　　npm install --save-dev babel-plugin-import

如果报错如下图，将缺少的 less less-loader 依赖安装上

　　npm install less less-loader --save

error  in ./node_modules/ant-design-vue/es/style/index.less

Syntax Error: TypeError: this.getOptions is not a function


 @ ./node_modules/ant-design-vue/es/style/index.less 4:14-198 15:3-20:5 16:22-206
 @ ./node_modules/ant-design-vue/es/button/style/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://172.31.202.46:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

项目中babel.config.js文件配置新增配置如下

　　将其中的style: true修改为"style": “css”，修改后内容如下

// babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 新增代码
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css'}
    ] //`style: true`会加载less文件
  ]
}

项目src目录下main.js文件代码如下

import Vue from "vue";
import App from "./App.vue";
// main.js

import router from "./router";
import store from "./store";

// 新增代码：引入特定组件
// 此时会自动引入对应的样式文件，无需再手动逐一引入
import {
  Button
} from 'ant-design-vue'

// 新增代码：注册特定组件
Vue.component(Button.name, Button)

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

.vue单文件组件中，对引入的组件进行使用

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
      <a-button type="primary" @click="handleClick">Primary</a-button>
    </div>
  </div>
</template>