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

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

ただいまの
回答率

90.36%

  • JavaScript

    22103questions

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

  • Vue.js

    1574questions

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

vue-cli 理解

解決済

回答 1

投稿

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

akao

score 49

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/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.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • JavaScript

    22103questions

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

  • Vue.js

    1574questions

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