我刚刚在v对话框中添加了一个名为AddScan的简单组件,但是我在控制台中得到了它:
[Vue warn]: Unknown custom element: <AddScan> - did you register the component correctly?
For recursive components, make sure to provide the "name" option.
此外,当我编辑文件并保存时,vue-cli不会编译它,但是当我编辑另一个组件并保存更改时,它会编译但会出现此错误:
warning in ./src/views/ScanResults.vue?vue&type=script&lang=js&
"export 'AddScan' was not found in '@/components/scan'
这真的是我第一次遇到这个问题,我不知道怎么了。
我使用的是Vue 2.6.10和Vuetify 2.1.7。
ScanResults.vue(父级):
<template>
<v-layout row>
<v-flex row class="justify-space-between ma-5 ">
<div>
<v-dialog v-model="dialog" width="500">
<template v-slot:activator="{ on }">
<v-btn v-on="on" class="ma-2 lowerCase" color="#E0E0E0">
Ajouter un scan
</v-btn>
</template>
<AddScan :items="items"></AddScan>
</v-dialog>
</div>
</v-flex>
<v-flex v-if="items.length < 2">
<ScanGrid :items="items"></ScanGrid>
</v-flex>
</v-layout>
</template>
<script>
import { mapGetters } from "vuex";
import { ScanGrid } from "@/components/scan";
import { AddScan } from "@/components/scan";
export default {
name: "ScanResults",
components: {
ScanGrid,
AddScan
},
...
AddScan.vue(子级):
<template>
<v-card>
<v-list>
<v-list-item v-for="(item, i) in items" :key="i">
<v-list-item-content>
<v-list-item-title v-text="item.StorageName"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "AddScan",
computed: {
...mapGetters(["getIsDarkMode", "getPhysicalInventoryBatch"])
},
async created() {
try {
await this.$store.dispatch("loadPhysicalInventoryBatch");
const items = this.$store.getters.getPhysicalInventoryBatch;
this.$emit("update", items);
} catch (e) {
console.error(e);
}
},
data: () => ({
items: [],
dialog: false
})
};
</script>
package.json:
{
"name": "",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 8084",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"lint:fix": "vue-cli-service lint --fix"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-solid-svg-icons": "^5.11.2",
"@fortawesome/vue-fontawesome": "^0.1.7",
"axios": "^0.19.0",
"core-js": "^3.3.5",
"material-design-icons-iconfont": "^5.0.1",
"moment": "^2.24.0",
"qrcode": "^1.4.2",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-moment": "^4.0.0",
"vue-mugen-scroll": "^0.2.6",
"vue-promised": "^1.2.1",
"vue-router": "^3.1.3",
"vuetify": "^2.1.7",
"vuetify-dialog": "^0.3.8",
"vuex": "^3.0.1",
"vuex-i18n": "^1.13.1",
"vuex-persistedstate": "^2.6.0"
},
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.11.2",
"@vue/cli-plugin-babel": "^4.0.5",
"@vue/cli-plugin-eslint": "^4.0.5",
"@vue/cli-plugin-pwa": "^4.0.5",
"@vue/cli-plugin-unit-jest": "^4.0.5",
"@vue/cli-service": "^4.0.5",
"@vue/eslint-config-prettier": "^4.0.1",
"@vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^23.6.0",
"compression-webpack-plugin": "^3.0.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"lerna": "^3.18.3",
"sass": "^1.23.1",
"sass-loader": "^7.3.1",
"vue-template-compiler": "^2.5.21"
}
}
vue.config.js:
const CompressionPlugin = require("compression-webpack-plugin");
const path = require("path");
module.exports = {
outputDir: path.resolve(__dirname, "../PmpTeamMateDeploy/Pmp.Web.Inventory"),
configureWebpack: {
plugins: [new CompressionPlugin()],
devtool: "source-map"
},
css: {
loaderOptions: {
sass: {
data: `
@import "@/assets/style/style.scss";
`
}
}
},
pwa: {
workboxPluginMode: "InjectManifest",
workboxOptions: {
swSrc: "src/service-worker.js",
exclude: [/\.map$/, /manifest\.json$/]
},
themeColor: "#78a22e"
},
chainWebpack: config => {
["vue-modules", "vue", "normal-modules", "normal"].forEach(match => {
config.module
.rule("scss")
.oneOf(match)
.use("sass-loader")
.tap(opt =>
Object.assign(opt, { data: `@import '~@/assets/style/style.scss';` })
);
});
}
};
更新:在组件部分的父组件中,我添加了AddScan:()=> import(“ @ / components / scan”),摆脱了我遇到的编译错误。保存AddScan文件时仍然无法编译。
我还将vue-cli和所有插件和依赖项从3.12.1更新到4.0.5,将core-js从2.6.10更新到3.3.5,将sass-loader从7.3.1更新到8.0.0,但又恢复到7.3 .1,因为它由于某种原因使我在编译时抛出104个错误,以及Node从10.something到12.13.0。
更新2:基本上,问题似乎在于vue拒绝编译新文件。旧的由于某种原因编译良好。我尝试使用较旧的软件包版本加载分支的旧版本,只是npm install,仍然不会编译新文件。
答案 0 :(得分:0)
好吧,我觉得自己是一个令人难以置信的白痴,但是我们去了:该组件位于组件/扫描中,但是由于它是父组件,因此我称之为视图,所以我完全忘记了要在索引中导入/导出它扫描文件夹中的.js文件。
components / scan / index.js:
import ScanGrid from "./ScanGrid";
import ScanAdd from "./ScanAdd";
export { ScanGrid };
export { ScanAdd };