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

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

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

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

CDN

CDNは、Webコンテンツをインターネット経由で配信するのに最適化されたネットワークを指します。Webサイトにある静的コンテンツをWebサイトが管理されているサーバーとは異なるサーバーにキャッシュし代わりに配信することで、負荷が分散し速度を向上する仕組みです。

JavaScript

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

Q&A

解決済

1回答

1858閲覧

VueのライブラリをCDNまたはローカルで使用したい

sanset

総合スコア186

Vue.js

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

CDN

CDNは、Webコンテンツをインターネット経由で配信するのに最適化されたネットワークを指します。Webサイトにある静的コンテンツをWebサイトが管理されているサーバーとは異なるサーバーにキャッシュし代わりに配信することで、負荷が分散し速度を向上する仕組みです。

JavaScript

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

0グッド

0クリップ

投稿2021/05/18 13:33

Vue.jsをcdnで読み込んだものを使用しています。

jQueryのように、一部のページでVue.jsのライブラリを読み込んで、一部の要素でVueの機能を使いたいのですが、その際に下記のライブラリを使用したいです。
Vueでsvgの要素をflexboxのように配置できるライブラリが公開されています。

https://github.com/jie123108/vue-svg-flexbox

ただ、このようにインストール方法がnodeモジュールの記載しかない場合でも、cdnのようにライブラリを読み込む、もしくは該当ファイルをscriptタグで読み込んで使用したい場合はどのようにしたらよいのでしょうか。

下記のソースコードで、上記のライブラリを使用したい場合の追記内容を知りたいです。

html

1<div id="vue"></div> 2 3<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> 4<script> 5new Vue({ 6 el: '#vue', 7}); 8</script>

一応CDNのURLは公開されている?ようですが、
https://www.jsdelivr.com/package/npm/@jie123108/vue-svg-flexbox

下記のように追記しても、Uncaught ReferenceError: require is not definedとなってしまい、正規の方法ではないような気がしています。

html

1<div id="vue"></div> 2 3<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> 4<script src="https://cdn.jsdelivr.net/npm/@jie123108/vue-svg-flexbox@1.0.3/dist/vue-svg-flexbox.umd.min.js"></script> 5<script src="https://cdn.jsdelivr.net/npm/@jie123108/vue-svg-flexbox@1.0.3/dist/vue-svg-flexbox.min.js"></script> 6<script src="https://cdn.jsdelivr.net/npm/@jie123108/vue-svg-flexbox@1.0.3/dist/vue-svg-flexbox.esm.js"></script> 7<script> 8new Vue({ 9 el: '#vue', 10}); 11</script>

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

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

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

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

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

guest

回答1

0

ベストアンサー

残念ながら、かなりの茨の道です。

vue-svg-flexbox依存関係がVueだけ、というならまだなんとかなるのですが、実際には他にも依存関係があるので(package.json)、それらのライブラリも揃える必要があります。

投稿2021/05/18 22:46

maisumakun

総合スコア146018

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

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

sanset

2021/05/18 23:28

回答ありがとうございます。package.jsonから他にも読み込みが必要なライブラリを判断することは出来るのでしょうか?
maisumakun

2021/05/18 23:46

上のリンクは、それが分かる部分に張ってあります。
sanset

2021/05/19 05:49

あ、そうことですね。 core-jsとcss-layoutとvueになっているので、core-jsとcss-layoutのライブラリも含めて読み込めば良い、ということでしょうか? 茨の道というのは、具体的にどのような工程がこれから必要になるのか、お手数がもう少し教えて頂けると嬉しいです。
maisumakun

2021/05/19 06:09 編集

> core-jsとcss-layoutのライブラリも含めて読み込めば良い、ということでしょうか? そのライブラリがさらになにかに依存していないかを調べて、依存していたらそれも読み込む、ということを繰り返さないといけません。
sanset

2021/05/19 08:30

そういうことですね。分かりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問