【Vue.js入門】VueのHelloWorldを解説 (Vue Routerなし)
Vue.jsで、vue init webpackしたときに生成されるindex.html/main.js/App.vue/HelloWorld.vueがどのような構造になっているか整理しました。
Vueはシンプルで学習コストが低いと紹介されていることが多いのですが、個人的な感想では、Vue CLIを導入するところから難しく感じました。そこにきて、HelloWorldの構造もよくわからず、どこをいじって改変していくのか、初見でわかりませんでした。
概要
以前の記事で、外部JavaScript呼び出しでお手軽にVueを始めることを試しました。ただ、本格的にVueを利用するために、様々なツールやライブラリの恩恵を受けるためにVue CLIの導入が必須だと感じます。ところが、vue init webpackして出力されるファイルがややこしく、どこをどう触っていくのかいまいちわからないと感じていました。
HelloWorldが既に入れ子になっていて、難解に感じたので、順を追って整理してみます。
vue initする際にvue-routerの使用を[Y]にしていると、さらにややこしくなるので、まずは、Vue Routerなしで見てみます。
ソースはGitHubに載せました。
詳細
各ファイルの内容を順に参照する
見て行く順は、index.html -> main.js -> App.vue -> HelloWorld.vueの順です。
index.html
まずはHTMLから見ます。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue_app_norouter</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
この中で<div id=”app”></div>がポイントです。
main.js
次にmain.jsを見てみます。
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'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: ''
})
el: ‘#app’が先ほどの<div id=”app”></div>タグと紐づいています。
import App from ‘./App’でApp.vueを読み込み、components: { App },でコンポーネントとして呼び出しています。
index.htmlに<script>タグでmain.jsを外部ファイル読み込みする記述がないのですが、どうしてjsがロードされるのでしょうか。。。
App.vue
次にApp.vueを見てみます。
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
〜〜省略〜〜
}
</style>
まず<style>タグは動作に影響ないので、省いて考えます。
name: ‘App’,でApp.vueコンポートネントの名前を定義し、
import HelloWorld from './components/HelloWorld'
components: {
HelloWorld
}
でHelloWorld.vueコンポーネントを読み込んでいます。
ここにも<div id=”app”>がありますが、el: ‘#app”とどう関係あるのでしょうか。
HelloWorld.vue
最後にHelloWorld.vueを見ます
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
〜〜省略〜〜
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
これはプロアクティブ変数msgに文字列が設定され、<h1>タグで{{msg}}が読み出されていることがわかります。
まとめ
まとめると index.html -> main.js -> App.vue -> HelloWorld.vue の順に入れ子になっていることが確認できました。
この構造を見るに、独自の処理を記述するなら、HelloWorld.vueをコピペして書き換えるのが良いと考えています。
「【Vue.js入門】VueのHelloWorldを解説 (Vue Routerなし)」への1件のフィードバック