Question

运行parcel watch index.js时，我看到控制台错误（如下所示）。为什么要尝试使用npm加载组件？

npm ERR! 404 Not found : MyComponent
npm ERR! 404 
npm ERR! 404  'MyComponent' is not in the npm registry.
npm ERR! 404 Your package name is not valid, because 
npm ERR! 404  1. name can no longer contain capital letters
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/jonny/Projects/invoices/npm-debug.log
  /home/jonny/Projects/invoices/src/App.vue:7:40: Failed to install Invoice.
    at PromiseQueue.install [as process] (/usr/local/lib/node_modules/parcel-bundler/src/utils/installPackage.js:46:11)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

App.vue

<template>
    <div>
        {{name}}
        <my-component></my-component>
    </div>
</template>

<script lang="ts">
    import Vue from "vue";
    import MyComponent from "MyComponent"

    export default Vue.extend({
        data: function() {
            return {
                name: 'Hello World!',
            }
        },
        components: {
            MyComponent // This line is the problem!
        }
    });
</script>

<style scoped>

</style>

MyComponent.vue

<template>
    <div >
    </div>
</template>

<script>
    export default MyComponent = Vue.component('my-component', {
        data: function () {
            return {
                myvalue: 0
            }
        },
    });
</script>

index.js

import Vue from 'vue';
import {default as App} from './App';

new Vue({
    el: '#app',
    render: h => h(App),
});

Answer 1

导入路径应该是本地文件的相对路径。

Parcel的module resolution使用标准的Node算法，其中普通模块名称（在这种情况下为MyComponent）将导致在node_modules目录中进行查找（在Parcel的情况下直接指向NPM）

但是MyComponent实际上是本地文件（MyComponent.vue）。假设MyComponent.vue与App.vue位于同一目录中，则相对路径将为./MyComponent.vue：

// import MyComponent from "MyComponent" // DON'T DO THIS
import MyComponent from "./MyComponent"

包裹试图从npm安装自定义vue组件

1 个答案: