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

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

ただいまの
回答率

90.84%

  • JavaScript

    14816questions

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

  • Vue.js

    523questions

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

vue-cli 理解

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 94

nihcika

score 11

https://qiita.com/MariMurotani/items/5fbea5942d2edf149989

↑上を参考にvueの勉強をしています...
が、分からないことだらけです、教えてください...

//main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})
//App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
//router/index.js

import Vue from 'vue'
import Router from 'vue-router'
//import HelloWorld from '@/components/HelloWorld'
import Scene1 from '@/components/Scene1'
import Scene2 from '@/components/Scene2'

Vue.use(Router)

export default new Router({
    routes: [{
        path: '/',
        name: 'Scene1',
        component: Scene1
    }, {
        path: '/Scene2',
        name: 'Scene2',
        component: Scene2
    }]
})
//Scene1.vue

<template>
  <div class="hello">
    <p @click="alertLocation">{{ msg }}</p>
    <router-link to="/scene2">Scene2にいくよ!</router-link>
  </div>
</template>

<script>
export default {
  name: 'Scene1',
  data () {
    return {
      msg: 'This is Secne1!'
    }
  },methods:{
      alertLocation: function(){
          alert("This is Secne1!")
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
p{
  cursor: pointer;
  color: blue;
}
</style>
//Scene2.vue

<template>
  <div class="hello">
    <p @click="alertLocation">{{ msg }}</p>
    <router-link to="/">Scene1にいくよ!</router-link>
  </div>
</template>

<script>
export default {
  name: 'Scene2',
  data () {
    return {
      msg: 'This is Scene2!'
    }
  },methods:{
      alertLocation: function(){
          alert("This is Secne2!")
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
p{
  cursor: pointer;
  color: blue;
}
</style>

/*main.jsについて*/

import router from './router'

これはrouterというフォルダのパスを示すだけで、中のindex.jsを持ってこれるのですか。

new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

components: { App }によって、#app仮装DOMにAppというコンポーネントが適用されるのでしょうか
さらに、ここの routerという宣言によって、App.vueの中での <router-view/> という宣言が可能になるのでしょうか

最後に template: '<App/>' これに関しては意味が全く分かりません...
どのような意味でしょうか
調べていても、ここに、Appなどという独自タグ?を書いてる事例を見つけられなくて

/*.vueについて*/

"こちらのrouter-viewタグには
export default new Router(...)で指定したコンポーネントが置換されます。"

というところについて、これは例えばScene1とScene2を同じページに並べたい場合にはどのようにすればいいのでしょうか
export default new Router({
routes: [{
path: '/',
name: 'Scene1',
component: Scene1
}, {
path: '/Scene2',
name: 'Scene2',
component: Scene2
}]
})
ここの path: '/Scene2' を path: '/'にしてみたところ、Scene1しか表示されませんでした...
あとは App.vueの <router-view/> を続けて二回書いてみたら上からScene1、Scene2が表示されるのかなと思ったのですがScene1しか表示されませんでした...

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

※完全回答ではないと思いますが、少しでも理解が進めばと思い回答します。

これはrouterというフォルダのパスを示すだけで、中のindex.jsを持ってこれるのですか

こちらはindex.jsがあればそちらを認識したと思います

newVue部分については実際のVueを初期化するjavascriptになります。

このjavascriptから実際にページ上で#app要素にVueを適用しますよ、というようなことが設定されていて、あとはAppコンポーネントやRouterから全てが表示されるような仕組みです。

new Vue({
    el: '#app', // id app に適用する
    router, // router: routerと同じ意味です。 route/index.jsで定義されているnew Router によってRouterインスタンスが入ります。
    components: { App }, // App.vueというコンポーネントを使いますという登録です。
    template: '<App/>' // .vueファイルのtemplateタグと同じです。 <App></App> と同じ意味で、App.vueを表示するという形になります。
})

これは例えばScene1とScene2を同じページに並べたい場合にはどのようにすればいいのでしょうか

通常はページごとにページ用の大枠のコンポーネントみたいなものを作ります。

Scene1PageViewで

<template>
    <div>
        <Scene1/>
        <Scene2/>
    </div>
</template>

というふうに表示することになるかと思います。

違うページに相当するコンポーネントを2つ表示することは中々ないと思いますが、
違うコンポーネントからScene1/Scene2をどちらにせよ読み込むという形になるのではないかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/09 14:37

    回答ありがとうございます

    template: '<App/>'
    というのはhtml側にAppタグを生み出し、そこにAppコンポーネントが当てはまる感じでしょうか...
    だとするならば、それはApp.vueで

    export default {
    name: 'App'
    }

    という風に、name: "App"と宣言してるから可能なのでしょうか
    name: "xxx"というのが xxxコンポーネントっていう捉え方でいいのでしょうか

    単一ファイルコンポーネントから、別の単一ファイルコンポーネントを呼べましたので、そんな感じでできました!!!
    ありがとうございます!

    キャンセル

  • 2018/06/09 16:18

    html側にAppタグを生み出すというか、template内のAppタグをAppコンポーネントとして解釈するようにする、ということですね。
    タグ名とname option は関係なくて、components プロパティでのキー名になっています。
    { App } は { App: App } の省略形ですから、'App'という名前で App.vue が使えるようになります。

    キャンセル

  • 2018/06/09 17:24

    少しわかってきました、ありがとうございます...

    キャンセル

  • 2018/06/09 21:37

    お返事遅くなりすみません!

    template内のAppがコンポーネントとして認識されて、#app内にvueが適用するというイメージです。

    また、既に把握されていそうですが、nameについては特にコンポーネント登録時に影響はなく、
    importによって読み込まれた部分を App: Appによって渡すという感じです。

    vueファイルはjsファイルにトランスパイルされるため、このApp: Appの右側のAppという値はrouterを適応しているのと同様jsファイルをimportしたあとにそれを適用しているようなイメージとなります。

    コンポーネントもnew Vueしているような所と同じような感じで記載できますが、それが書きにくいためvueファイルという形式が生まれてそれをjsにトランスパイルできるような仕組みが提供されています。

    キャンセル

  • 2018/06/11 11:52

    とんでもないです、回答本当にありがたいです。

    nameについて、 "importによって読み込まれた部分を App: Appによって渡す"ということですが、

    import App from './App'

    によってApp.vueの全体がAppという名前で渡ってきた。
    App.vueの全体というか、App.vueファイル自体が渡ってきて、それをAppという名前で扱うことにした。
    そしてそのApp.vueファイルの中のAppというコンポーネントを使うといった感じでしょうか。
    つまり、{ App: App } は、
    { App.vueというファイル : その中のAppコンポーネント }みたいな感じでしょうか...。

    キャンセル

  • 2018/06/11 13:07

    完璧にトランスパイルの流れが私も理解できていないと思いますが、

    > App.vueファイル自体が渡ってきて、

    という部分は.vue形式のファイルがトランスパイルされる際にes modulesの形式(js)に変換されてそれをimportしていると理解しています。

    もしかするとvueファイルが恐らくなかったバージョン1系のドキュメントをぱらぱらと見ると理解できることが多い良いかもしれません。
    https://v1-jp.vuejs.org/guide/components.html

    キャンセル

  • 2018/06/11 13:13

    ありがとうございます...
    読んでみます

    キャンセル

  • 2018/06/11 13:35

    > App.vueの全体というか、App.vueファイル自体が渡ってきて、それをAppという名前で扱うことにした。
    > そしてそのApp.vueファイルの中のAppというコンポーネントを使うといった感じでしょうか。

    App.vue 内で export default でオブジェクト(コンポーネントの設定)がエクスポートされていますよね?
    import App from './App' というのは、App.vue というファイルの今言った default export であるオブジェクトが App という名前の変数で使えるようになるということです。
    vue-loaderの性質上、default export がそのまま export されるわけではなく、テンプレートの情報なども追加されて export されますが、使う側としては、このようにコンポーネントがインポートできるんだということで、詳細は気にする必要はありません。

    ES6 import/export
    https://qiita.com/bmf_san/items/bdb67c7abf4d381cf976

    > つまり、{ App: App } は、
    > { App.vueというファイル : その中のAppコンポーネント }みたいな感じでしょうか...。

    いえ、違います。{ } がオブジェクトリテラルであるということは分かりますか?
    オブジェクトの key に任意の名前を、value にコンポーネントを指定します。
    例えば { MyComponent: App } とすれば App という変数に入ったコンポーネントがテンプレート内で <MyComponent/> と使えるようになります。

    キャンセル

  • 2018/06/11 13:44 編集

    回答ありがとうございます。
    やっとわかった気がします。
    今試しに

    new Vue({
    el: '#app',
    router,
    components: { MyComponent: App },
    template: '<MyComponent/>'
    })

    このように変えてみたのですが、同じようにできました。

    components: { "タグ名" : "単一ファイルコンポーネントオブジェクト(?)" }

    みたいな感じですね
    そもそもファイル全体とかいう概念は全然間違ってましたね...

    キャンセル

  • 2018/06/11 14:05

    karamarimoさん
    とても分かりやすい説明ありがとうございます!

    キャンセル

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

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    14816questions

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

  • Vue.js

    523questions

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