使用Ant Design of Vue前端框架编写项目过程中遇到的问题汇总
Ant Design of Vue官网的按需引入ant-design-vue教程错误,正确步骤如下按需引入antd正确步骤
·
问题1:main.js?56d7:27 Uncaught ReferenceError: Antd is not defined
*解决办法
在package.json文件中,添加babel配置,其中"libraryName"的值必须与main.js中的Antd一致。
main.js
import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
//导入app根组件
import App from './App'
Vue.use(Antd);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
package.json
{
"name": "antd-demo",
"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": "^1.4.10",
"axios": "^0.19.2",
"core-js": "^3.4.4",
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
"babel-plugin-import": "^1.13.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"vue-router": "^3.1.5",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
],
//新添加的配置信息
"babel": {
"plugins": [
[
"import",
{
"libraryName": "Antd",
"style": "true"
}
]
]
}
}
问题二:ERROR Error: Cannot find module ‘babel-plugin-import’ from ‘/Users/sundongping/IdeaProjects/umeapiplus’
问题产生原因:
未安装按需加载组件代码和样式的 babel 插件
解决办法
安装babel-plugin-import插件即可
npm i babel-plugin-import -D
问题三:warning.js?d96e:34 Warning: getFieldDecorator
will override value
, so please don’t set value
directly and use setFieldsValue
to set it.
问题产生原因:
在使用form组件时,我给每一个表单元素的value属性赋了初始值
解决办法
删除value属性,改用initialValue给每一项赋初始值
问题四:子组件向父组件传递引用参数(如数组)时,若父组件修改/删除该参数,子组件的数据也跟着一起改变
问题五:eslint:do not access object.prototype method ‘hasOwnProperty’ from target object no-prototype-builtins
问题产生原因:
我使用hasOwnProperty()方法来判断某个键是否存在与Json对象中
# jsonRes是一个json对象,perror是键名
jsonRes.hasOwnProperty("perror")
解决办法
将上面的写法改为如下形式即可
# jsonRes是一个json对象,perror是键名
Object.prototype.hasOwnProperty.call(jsonRes, "perror")
问题六:Elements in iteration expect to have ‘v-bind:key’ directives vue/require-v-for-key
问题产生原因:
<template>
<ul>
//这样写会报错
<li v-for="item in pLanguages"> {{item}}</li>
</ul>
</template>
<script>
export default {
name: "ScopeSlot",
data(){
return {
pLanguages: ['JavaScript','Java','C++','Go','C#']
}
}
}
</script>
解决办法
<template>
<ul>
//修改后的写法
<li v-for="item in pLanguages" :key="item"> {{item}}</li>
</ul>
</template>
更多推荐
已为社区贡献15条内容
所有评论(0)