首页 > 其他分享> 文章详细

vue2引入ant-design报错汇总

2022-04-26 16:31:59 阅读：275 来源： 互联网

标签：vue js ant Vue design vue2 import 报错

由于项目需要，兼容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文件配置新增配置如下

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

项目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>

标签：vue,js,ant,Vue,design,vue2,import,报错
来源： https://www.cnblogs.com/chuanmin/p/16195313.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue2引入ant-design报错汇总