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

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

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

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

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

Q&A

解決済

1回答

591閲覧

vue-cliでvueファイル内にクラスを無事に記述したい

supereater712

総合スコア29

Vue.js

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

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

0グッド

0クリップ

投稿2020/02/10 12:20

発生している問題

vue-cliを使って雛型を作り、vueファイルでwebページを作っています。
しかしscriptの中にclass文を1つ置いたところ、下記のエラーが起きました。
その内容にかかわらず、class文があることがエラーの要因のようです。

ただ、適当なvueインスタンスたるものをexport defaultすれば、エラーは収まります。
しかし、私は一連の現象とその原因がよくわかっていません。

vueファイルのscript欄には何も書かなくてもよい選択肢もあるが、class文を記述する場合は同欄でコンポーネントがexport defaultされてないといけない。
これは奇妙なので、どういう事かどなたか御指南頂ければ幸いです。

###エラーメッセージ
seedtest.vue とは、この質問におけるvueファイルです。

in ./src/components/seedTest.vue 21:2-16 "export 'default' (imported as '__vue_script__') was not found in '!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./seedTest.vue'

ソースコード

vue

1// エラーが起きている問題のファイル(seedTest.vu) 2<template> 3 <div> 4 <p>ここはテストです。</p> 5 <router-link to="/">Go to page1</router-link> 6 </div> 7</template> 8 9<script> 10class a{} //この1文で上記のエラー 11</script> 12 13<style></style> 14

vue

1// class文を諦めずとも、 2// 下のような適当なvueインスタンスたるものを追加すれば、エラーは収まった 3export default { 4 name: "first", 5 data() { 6 return { 7 msg: "Welcome to Your Vue.js App" 8 }; 9 } 10}; 11

補足情報

"vue": "^2.6.11", "vue-router": "^3.1.5",

...
"babel-core": "^6.26.3",
...
"webpack": "^4.41.5",
...

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

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

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

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

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

guest

回答1

0

ベストアンサー

この問題と同じですかね?
export 'default' (imported as 'vue_script') was not found in

ここの回答によれば<script>記述を省略することはできるが<script>を記述する際は何かしらexportする必要があるといったような感じですね。
理由は特に書かれていませんでしたがそういう仕様である可能性は高いです。

投稿2020/02/13 10:07

nt4c

総合スコア768

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

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

supereater712

2020/02/13 13:17

script欄がある場合は、exportされたものが求められているという仕様なんですね。 お陰様で記述に対する扱いを新たにする事ができました。 感謝しております。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問