Vue2项目引入Antd报错(已解决)
新建了一个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 li
·
新建了一个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')
发生的两个错误
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'
}
]
]
}
重启项目即可
更多推荐
已为社区贡献1条内容
所有评论(0)