Vue.js勉強記録その8 コンポーネントを使おう Section3-3 Ver1
書籍でvue.jsを勉強しています。ログがわりに書いていきます。
今日は、Chapter3のSection3。いよいよプロジェクトによる開発です。
この書籍を勉強中です。
■プロジェクトによる開発
・プロジェクトで開発しよう
しばらくコードは出て来ず、プロジェクトについての説明が、数ページ書かれる。
最初の方で作って、放置していたプロジェクトを再利用する感じで説明されます。
プロジェクト内のファイルやフォルダなど説明があります。フォルダの中は、以下の様な感じになっています。
vite_appフォルダ
┗index.html
┗package.json
┗package-lock.json
┗publicフォルダ
┗favicon.jco
┗srcフォルダ
┗main.js
┗App.vue
┗index.css
┗assetsフォルダ
┗logo.png
┗componentsフォルダ
┗HelloWorld.vue
┗node_modulesフォルダ
┗略
┗distフォルダ
┗略
基本的には、srcフォルダの中身をいじっていくっぽい。
プロジェクトとWebサイトについての違いが説明されます。
要約すると、WebサイトはHTMLやCSS、画像などを作ってWebサーバーに置いておくだけで良いのに対し、プロジェクトは、そのプロジェクト自体に含まれる仮のWebサーバーを使って動作確認して、ビルドという作業をしてHTMLなどの実際にWebサーバーにアップするファイルを作る必要がある（ビルド、buildは、建てる、作るなどの意味）。
・main.js、App.vue、index.htmlの説明
srcタグの中に、最初から入っているmain.js、App.vue、index.htmlの説明です。
まずはmain.jsから
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')やっていることは4つ。
1.vueモジュールにある「createApp」というメソッドを読み込む。
2.App.vueというファイルを読み込む。
3.index.cssというファイルを読み込む。
4.createApp(App).mount('#app')で、アプリケーションオブジェクトを作って、id=appにマウントしている。アプリケーションオブジェクトを作るときのAppは、3で読み込んだオブジェクト。
こんな感じ。そのうち、1だけが微妙にフワッとしていてよく解らない。。「vueモジュールにある」と表現されているが、そんなものどこにあるの？っていうかそもそもモジュールってなんだ？フワッとしか解らない。。
が、
気にしないwそのうち解るって事で先に進もう。
次はApp.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>大きく分けて、役割は二つ。templateの部分とscriptの部分。
template内のimgについては、普通のhtmlのimgタグ。
HelloWorldタグは、コンポーネントを呼び出す記述。そのコンポーネントの内容は、script部分で読み込んでいるHelloWorld.vueに書かれている。
script部分では、まずHelloWorld.vueが読み込まれる。その後、export default{}という記述がある。
このファイルを別のファイルから読み込んだ時に、読込先で、読み込む時につかった変数に、export default {}の中身が取り出される。
例えば、
import 変数 from 'App.vue'こんな感じで、別のファイルからApp.vueを読み込んだ時に、変数にApp.vueのexport defaultで書かれた内容が、取り出される。
うん。ちょっとフワッとしか解らないが、気にしないw
要するに、自分を読み込んだ人に渡すものが書かれてるイメージって事で先に進む。
次にindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>こっちは非常にわかりやすいw
<div id="app"></div>が、アプリケーションオブジェクトをマウントしているところ。
それと、main.jsを読み込んでいる。既述の通り、そこからApp.vueやHelloWorpd.vueが読み込まれていく。
プロジェクトは、以下の様に動いているとまとめられている。そっくりそのまま引用します。
1.表示されるWebページは、index.htmlとして用意されている。JavaScript関係のタグでmain.jsを読み込み、これでVue3の処理が実行されている。
2.main.jsでは、Vue3のアプリケーション・オブジェクトが作成される。ここで、App.vueのAppコンポーネントが組み込まれる。
3.Appコンポーネント（App.vue）では、その内部で更にHelloWorldコンポーネントを組み込んでつかっている。
■まとめ
プロジェクト自体の説明と、必要なファイルの紹介などがメインです。次回から、プロジェクト内のコードを修正しながら動きを見ていきます。
この記事が気に入ったらサポートをしてみませんか？