找不到 Vue JS 模块（日期选择器）

Question

我对 vue.js 还是很陌生——我今天才开始使用它，自然而然地遇到了一个我似乎无法解决的错误。

我正在使用 v-md-date-range-picker 模块： (https://ly525.github.io/material-vue-daterange-picker/#quick-start。

说明告诉我执行以下操作：

1

npm install --save v-md-date-range-picker

2

<template>
  <v-md-date-range-picker></v-md-date-range-picker>
</template>

3

<script>
import Vue from 'vue';
import VMdDateRangePicker from "v-md-date-range-picker";
import "v-md-date-range-picker/dist/v-md-date-range-picker.css";

Vue.use(VMdDateRangePicker);
</script>

所以，我在项目文件夹的终端中运行命令，将 2 位代码添加到我的 HelloWorld.vue 页面，然后将步骤 3 中的代码添加到 main.js。

当我查看我的 package.json 文件时，我看到：

"dependencies": {
  "core-js": "^2.6.5",
  "v-md-date-range-picker": "^2.6.0",
  "vue": "^2.6.10"
},

但是，我得到了错误：

找不到模块：错误：无法解析“/Users/James/Documents/projects/vue”中的“v-md-date-range-picker/dist/v-md-date-range-picker.css” -test/src'

我在这里遗漏了什么明显的东西吗？

编辑：

我尝试了以下 cmets 中的响应，但没有成功。

在模块的主页上，我按照说明进行操作。但是，浏览页面时，我发现了相同的说明和一些额外的文字：

我假设您有一个有效的捆绑程序设置，例如由能够加载 SASS 样式表和 Vue.js SFC（单文件组件）的 vue-cli 生成。

我会在这里冒昧地说我没有工作的打包机。我进入了 node_modules 文件夹，找到了那个模块并查看了里面。没有 dist 文件夹。只是 .scss 文件等。

所以，我假设我需要先构建这个项目。

我该怎么做？

我认为在浏览器中运行它会即时执行此操作，但显然没有。

编辑 2：

经过一番谷歌搜索后，我找到了命令：

$ npm run build. 

这给了我这个错误：

没有找到这个依赖，要安装，可以运行：npm install --save v-md-date-range-picker/dist/v-md-date-range-picker.css

所以，我运行了那个命令，然后我得到了错误：

无法从“v-md-date-range-picker/dist/v-md-date-range-picker.css”安装，因为它不包含 package.json 文件。

Answer 1

在 v-md-date-range-picker/dist/ 中创建 v-md-date-range-picker.css 并从 md-date-range-picker.min.css

并刷新您的页面。由于某种原因，当我们安装 md-date-range-picker.min 时没有创建 css 文件

Answer 2

检查您是否可以在构建文件夹内的webpack.base.conf.js 中找到它。如果不添加。

module: {
    rules: [
      {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader'], // Note that the order is very important
      },

如果文件不存在，请先运行npm install style-loader css-loader --save，然后再将其添加到文件中。

解决您的问题

运行命令：npm install sass-loader --save

然后为模块中的每个 SCSS 文件添加一个导入。

这不是最佳解决方案，但在我看来该软件包已损坏，这只是一种解决方法。

我将花时间亲自试用该库并尝试提供修复。