質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

746閲覧

npmを使ったvue-js-modalのインストール

take-t.t.

総合スコア360

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/06/06 18:32

タイトル通り、vue-js-modalをnpmからインストールしようとすると下記のエラーが出て上手くいきません。

PS C:\Users\myName\Desktop\modal-test> npm install vue-js-modal --save
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\myName\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\myName\package.json'
npm WARN myName No description
npm WARN myName No repository field.
npm WARN myName No README data
npm WARN myName No license field.

updated 1 package and audited 2 packages in 0.483s
found 0 vulnerabilities

ファイルまたはディレクトリが無い、やら色々無いと言われているみたいですが、いまいち対処法が分かりません。
一応下記のコードで試しましたが、当然エラーで動きませんでした。

どうすればよいか全く分からず手詰まりになってしまいました。
お忙しい中恐縮ですが、どなたかご教授お願いいたします。

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>sample</title> 7 <link rel="stylesheet" href="CSS/main.css"> 8 </head> 9 <body> 10 <div id="app"> 11 <button v-on:click="show">show</button> 12 <modal name="hello-world"> 13 hello, world! 14 </modal> 15 </div> 16 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 17 <script src="js/script.js"></script> 18 </body> 19</html>

JavaScript

1import VModal from 'vue-js-modal' 2 3Vue.use(VModal) 4 5const vm = new Vue({ 6 el: '#app', 7 methods: { 8 show () { 9 this.$modal.show('hello-world'); 10 }, 11 } 12})

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

プロジェクトのディレクトリにnpm installする場合はpackage.jsonが存在する必要があります。
package.jsonnpm initで作成できますので、

npm init

してから

npm install vue-js-modal --save

してみてください。

投稿2019/06/06 18:44

aikon_marimo

総合スコア1083

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

take-t.t.

2019/06/06 20:44 編集

ご回答有り難うございます。 教えて頂いたようにしたところ、無事プロジェクト内に「package.json」と「node_modules」ファイルが作成され、そこに「vue-js-modal」がインストールされていました。 そこで改めて質問欄のコードを動かしてみたのですが、何故か「vue-js-modal」は機能していないようでした。 それでインストールした時のメッセージ(https://i.imgur.com/0gRbldt.png)を見返してみた所、 「vue-js-modal@1.3.31 requires a peer of vue@^2.2.6 but none is installed. You must install peer dependencies yourself.」 というメッセージが表示されていました。 パット見これが原因かと思ったのですが、いかがでしょうか? ただ私の知識ではそもそもvueのピアという意味が分からず、ピアの依存関係をインストールするという所は更に分からず、色々と調べてはみたのですが結局分からず仕舞いでした。 私の知識不足でお手数をおかけして大変申し訳ありませんが、もう少しだけお付き合いいただけないでしょうか?
otolab

2019/06/06 22:07

npmはライブラリのマネージャで、ライブラリ間の依存関係の管理も行っています。 「vue-js-modal@1.3.31はvueの2..2.6以上2.3.0未満のパッケージを必要としているがインストールされていない」ですかね。 vueは手動インストールが必要なのだと思います。 `npm install --save vue@^2.2.6` かな。
aikon_marimo

2019/06/06 22:22 編集

> Taku.HUさん 基本的に別の問題が発生した場合は、別質問にしていただけると助かります。 (スレッドが長くなって後で読みづらい、コメント欄に質問を書くと、他の回答できる方が居たとしても気づけない、等の理由があるので) 一応回答としては、 (1)追記頂いたWarningの件について ⇛ otolabさんが書いてくれた通りかと思います。vueとvue-js-modai@1.3.31のバージョンが不適合のためのWarningと思いますので、上記の通りバージョン合わせれば解消するかと思います。 (2)vue-js-modalが動かない件について ⇛ 多分バージョン合わせるだけじゃ動かなくて、おそらくwebpack等を使わずに実行しているのではないでしょうか。JSに書いてるimport文は、対応していないブラウザで実行するとエラーになります。 webpackの導入はここに書くのは大変なので、とりあえず以下で動くか試してもらえますか? 1. htmlに以下を追記してCDNでvue-js-modalを読み込む。 <script src="https://cdn.jsdelivr.net/npm/vue-js-modal@1.3.31/dist/index.min.js"></script> 2. JSのimport文を消して、Vue.use(VModal)を以下に書き換える。 Vue.use(window["vue-js-modal"].default); ↑URLがエスケープされてるのでエスケープ文字だけ読み替えてください。
take-t.t.

2019/06/07 07:09

ご返信ありがとうございます。 教えて頂いたところを書き換えた結果、無事に動きました。 それと動かなかった原因もなんとなく理解することが出来ました。 今回はじめてimportを使用してみたのですが、そのような仕様があることは知りませんでした、とても勉強になりました。 丁寧なご説明で返信にも答えていただき、本当にありがとうごいました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問