Question

我是Vue.js + Webpack世界的新手，并一直试图消化这么多信息。

无法弄清楚为什么当我从npm包（vue.js模板）导入单个.vue文件以在我的应用程序上使用时，webpack会尝试解析模板包本身的依赖关系。我只是将文件导入到我的应用程序中，并将其移至包的配置中。

这里的步骤：

$ vue create myproject
$ cd myproject
$ yarn add @coreui/vue
$ yarn serve

然后在myproject里面的App.vue上：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <Footer />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Footer from '@coreui/vue/Vue_Full_Project/src/components/Footer.vue'

export default {
  name: 'app',
  components: {
    HelloWorld,
    Footer
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Footer.vue，位于CoreUI / Vue包中，非常简单，包含：

<template>
  <footer class="app-footer">
    <span><a href="http://coreui.io">CoreUI</a> &copy; 2018 creativeLabs.</span>
    <span class="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
  </footer>
</template>

<script>
export default {
  name: 'c-footer'
}
</script>

但我明白了：

 error  in ./node_modules/@coreui/vue/Vue_Full_Project/src/components/Footer.vue

Module build failed: Error: Cannot find module 'babel-plugin-transform-runtime' from '/tmp/myproject/node_modules/@coreui/vue/Vue_Full_Project'
- Did you mean "@babel/transform-runtime"?
    at Function.module.exports [as sync] (/tmp/myproject/node_modules/resolve/lib/sync.js:42:15)
    at resolveStandardizedName (/tmp/myproject/node_modules/@babel/core/lib/config/files/plugins.js:104:31)
    at resolvePlugin (/tmp/myproject/node_modules/@babel/core/lib/config/files/plugins.js:53:10)
    at loadPlugin (/tmp/myproject/node_modules/@babel/core/lib/config/files/plugins.js:61:18)
    at createDescriptor (/tmp/myproject/node_modules/@babel/core/lib/config/config-descriptors.js:154:21)
    at /tmp/myproject/node_modules/@babel/core/lib/config/config-descriptors.js:106:12
    at Array.map (<anonymous>)
    at createDescriptors (/tmp/myproject/node_modules/@babel/core/lib/config/config-descriptors.js:105:27)
    at createPluginDescriptors (/tmp/myproject/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at /tmp/myproject/node_modules/@babel/core/lib/config/config-descriptors.js:52:19

 @ ./node_modules/@coreui/vue/Vue_Full_Project/src/components/Footer.vue 3:0-188 4:0-201
 @ ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"/tmp/myproject/node_modules/.cache/cache-loader"}!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js

如果我将单个文件Footer.vue复制到myproject / src文件夹并将import语句更新为＆＃39; ./ Footer.vue＆＃39;，则可以正常工作。

为什么webpack尝试解析模板包中的依赖项，如果我从未引用它的任何内容，而是从我的导入＆＃39;中提取单个独立文件。声明？

我应该如何以这种方式在我的应用程序中使用这样的模板？

由于

为什么从npm包导入单个Vue组件会因未解析的依赖关系而失败？

0 个答案: