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

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

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

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

JavaScript

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

Q&A

解決済

1回答

1193閲覧

vuejsでコンポーネントを別ファイルに分けたい

niea

総合スコア9

Vue.js

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

JavaScript

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

0グッド

0クリップ

投稿2018/06/30 03:49

前提・実現したいこと

社内でVueJSというフレームワークを使うことになったのですが、モジュールをメインのjsにimportする方法がわかりません。
main.jsというVueのコンストラクタに、mixin用のモジュール(mixin.js)とcontactformというテンプレート(contactform.js)をそれぞれ別ファイルとして管理し、インポートしたい。

発生している問題・エラーメッセージ

ためしたこと
1.require → undefinedが出たので調べたらサーバサイドのみ利用可能とありました。
2.import → *の有無やいくつかのパターンで試しましたが Unexpected identifierが出てしまいます。

該当のソースコード

main.js

javascript

1'use strict'; 2import contactform from '../templates/contactform'; 3import mixins from '../modules/mixin'; 4//## main constractor 5new Vue({ 6 el: '#wrap', 7 components: { 8 contactform 9 }, 10 mixins: [mixins], 11 data: {}, 12 created: function() { 13 //GAのスクリプト 14 } 15});

mixin.js

javascript

1'use strict'; 2export default { 3 methods: { 4 onMouseoverMakeOpacity: function(e) { 5 //処理1 6 }, 7 onMouseleaveEraseOpacity: function(e) { 8 //処理2 9 } 10 }, 11};

contactform.js

javascript

1'use strict'; 2import mixins from '../modules/mixin'; 3 4export default Vue.extend({ 5 mixins: [mixins], 6 data: function() { 7 return { 8 options: {}, 9 values: [], 10 error: '', 11 }; 12 }, 13 methods: { 14 onSubmitForm: function(e) { 15 //送信処理 16 }, 17 onSanitaize: function(str) { 18 //サニタイズ処理 19 } 20 }, 21 template: `<form></form>` 22}); 23

試したこと

require,class化試してみましたが上記のエラーやundefined(require)などでうまくいきません。

補足情報(FW/ツールのバージョンなど)

Vue.js v2.5.16
ここにより詳細な情報を記載してください。

お力添えいただけると幸いです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

ソースコード自体には問題ないと思います。ビルドの問題でしょう。
Webpack などでブラウザ向けにビルドしなければ import 文などは使えないですよ。

投稿2018/06/30 06:25

yhg

総合スコア2161

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

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

niea

2018/06/30 06:30

なるほど。importとはビルドが前提だったのですね。 headにリンク増やしたくなくてjsだけで完結できないかと考えていたのですが、おとなしくwebpackを導入することにします。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問