javascript - 节点模块不会导入到我的 Vue.js 项目中
问题描述
我正在尝试在 Vue.js 单文件组件中导入通过 NPM 安装的节点模块。每次,无论模块是什么,它都不会工作并抛出诸如These depedencies were not found
. 我正确地遵循了安装说明(至少我认为),但我想我错过了一些东西。
例子 :
尝试安装swiper.js
模块。我在正确的文件夹中安装了 NPM,然后在我想使用它的组件中添加了以下几行,例如他们网站上的解释:
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
当我启动我的服务器时,我收到了这个错误:
These dependencies were not found:
* swiper/css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ProductCarousel.vue?vue&type=script&lang=js&
* swiper/vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ProductCarousel.vue?vue&type=script&lang=js&
To install them, you can run: npm install --save swiper/css swiper/vue
编辑 :
这是我的 package.json 文件:
{
"name": "x",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^5.1.1",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"swiper": "^7.0.5",
"vue": "^2.6.14"
},
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.15.4",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.46.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
解决方案
一切看起来都很好,除了import 'swiper/css';
不需要导入。
您可以尝试删除您的node_modules文件夹并npm install
再次运行
推荐阅读
- android - 有两个intent filter的activity重启了,但是重启的时候主intent-filter没有被调用,其他intentet filter被调用
- salesforce - 无法连接到 Salesforce api
- django - 移动设备上的 Django 实时访问
- java - 我在哪里可以下载用于 Java 的 rt.jar?
- python - Python pandas 替代 'map' 用于 2 个变量的函数
- python - Pandas Groupby 并使用自定义值创建新列
- java - 我的 android 包的命名约定是有效的,但清单说它不是
- outlook - 在 Microsoft Graph / Outlook REST API 中识别 DSN(交付状态通知)或 NDR(未交付报告)和失败的收件人
- maven - 尽管在 pom 中排除条目,但 Maven 命令不排除任何内容
- android - Android 传递依赖