新建了一个Vue2项目,想引入Antd,却发生了两个错误
package.json

{
  "name": "antdpro1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "ant-design-vue": "^3.2.0",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-eslint": "~4.5.13",
    "@vue/cli-plugin-router": "~4.5.13",
    "@vue/cli-plugin-vuex": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "babel-eslint": "^10.1.0",
    "babel-plugin-import": "^1.13.5",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

安装了babel-plugin-import插件

npm install babel-plugin-import --dev

babel.config.js

module.exports = {
  presets: ["@vue/app"],
  // presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      {
        libraryName: "ant-design-vue",
        // libraryName: "Antd",
        libraryDirectory: "es",
        style: 'css'
      }
    ]
  ]
}

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 Antd from 'ant-design-vue/es'
import 'ant-design-vue/dist/antd.css';

Vue.config.productionTip = false

Vue.use(Antd)

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

发生的两个错误
Antd is not defined
Object(...) is not a function

2022年4月27日补充
已发现 package.json 的 antd 版本 不符

"ant-design-vue": "^3.2.0",

应改为 1.7.8版本

npm uninstall ant-design-vue
npm install ant-design-vue@1.7.8 --save
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd)

babel.config.js

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
      "import",
      {
        libraryName: "Antd",
        libraryDirectory: "es",
        style: 'css'
      }
    ]
  ]
}

重启项目即可

Logo

前往低代码交流专区

更多推荐