如何将node_modules中的新组件导入到项目中

Question

在回答时，你可以像我5岁一样安全地说话，因为我在这里(你好，冒名顶替综合症)。我已经使用Webpack和WordPress很长一段时间了，但我最近决定将Vue添加到组合中以帮助我学习。

问题是，我根本不知道自己在做什么。我成功地让WordPress和Webpack包含并使用了Vue，但那只是在工作了5天后，我仍然不明白它是如何工作的。现在，在尝试使用Vue时，我安装了带纱线的Flicking。我熟悉纱线安装，但在这一点上我迷失了方向。使用WordPress+Webpack+Vue，有太多的失败点，我甚至不知道从哪里开始。希望有人能帮忙。

当前错误：

未捕获错误：找不到模块'..//node_modules/@egjs/vue flicking'在对象处的webpackMissingModule(frontend.js？ver=1.1:17476:50)/node_modules/babel-loader/lib/index.js/node_modules/vue loader/dist/index.js？？ruleSet[1]。rules[9].使用[0]/assets/src/stickyButton.vue？vue&type=脚本&lang=js

文件结构(省略了问题范围之外的文件和文件夹)：

.
└── theme-folder/
├── frontpage.php (where the component is being used)
├── node_modules
├── package.json (and lock files and such)
└── assets/
└── src/
├── sass/
│   └── frontend.scss
├── js/
│   ├── frontend.js
│   └── header.js
└── stickyButton.vue           

粘性按钮.vue

<template>
<div class="wrapper">
<Flicking :options="{ renderOnlyVisible: true }">
<div v-for="idx in list" class="flicking-panel" :key="idx">{{ idx }}</div>
</Flicking>
<div class="block is-flex is-justify-content-center">
<span class="button mr-2 is-info is-outlined" @click="() => {
list.splice(0, 0, ...[list[0] - 2, list[0] - 1]);
}">Prepend</span>
<span class="button mr-2 is-info is-outlined" @click="() => {
list.push(list[list.length - 1] + 1, list[list.length - 1] + 2);
}">Append</span>
</div>
</div>
</template>
<script>
import * as Vue from 'vue';
import VueFlicking from "../../node_modules/@egjs/vue-flicking";
Vue.use(VueFlicking);
export default {
name: "stickyButton",
data() {
return {
list: [0, 1, 2, 3, 4]
}
}
}
</script>
<style scoped>
@import url("../../node_modules/@egjs/vue3-flicking/dist/flicking.css");
// Extra css code omitted
</style>

Webpack编译frontend.js中的所有js和输出：

// WP stuff
import "../sass/frontend.scss"
import "../js/header.js"
//start of vue stuff
import * as Vue from 'vue'
import Flicking from "@egjs/vue3-flicking";
import stickyButton from '../stickyButton.vue'
import { createApp } from 'vue'
const app = createApp(stickyButton)
app.mount('#stickyButton')

长话短说，我搜索的几乎所有内容现在都是来自屡试不爽的访问网站的紫色链接，我甚至不知道该去哪里查找。从stickyButton.vue组件调用flicking是否存在问题？这个问题在frontend.js中的调用方式是否正确？如有任何帮助、见解、建议、文章等，我们将不胜感激。谢谢

Answer 1

VueFlicker用于本地导入的官方文档如下所示：

<script>
import { Flicking } from "@egjs/vue-flicking";
export default {
name: "stickyButton",
components: {
Flicking: Flicking,
},
data() {
return {
list: [0, 1, 2, 3, 4]
}
}
}
</script>

款式：

<style scoped>
@import url("/node_modules/@egjs/vue-flicking/dist/flicking.css");
// Extra css code omitted
</style>

您可能需要配置webpack.config.js来解析node_modules路径：

// inside webpack.config.js
const path = require('path');
module.exports = {
//...
resolve: {
modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
}
};

参见webpack.js.org/configuration/resolve/