Vueファイルの基礎
このページで学べる内容
- Vueファイルの基礎
難易度
☆☆
動作環境
- OS : Mac
- yarn : 1.22.18
- @vue/cli : 5.0.4
はじめに
前回Vue CLIで作成したファイルを見ましたが、今回は根幹となるVueファイルを見ていきましょう。
public/index.html
vueファイルではないですが、最初にindex.htmlについて説明します。 このファイルは実際にユーザがアクセスするHtmlになり、この中でビルドされたVueのjavascriptを呼び出します。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
入門書では特に説明もなく、そのまま利用する事が多いですが、今回は少し説明します。
まず、<%=ですが、これはvue cliの中で利用しているejsというテンプレートテンプレートエンジンの記法で、変数の値を出力する際に利用するデリミタ（区切り文字のこと）です。
デフォルトで生成されている<%= htmlWebpackPlugin.options.title %>この変数は設定を特にしていない場合は、プロジェウト名が設定されます。vue.config.jsにtitleを設定することでindex.htmlを書き換えずに変更することも可能です。
下記にvue.config.jsでタイトルを設定したサンプルを記載します。
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
// 下記を追加
,pages: {
index: {
entry: 'src/main.js',
title: '書き換えたタイトル',
}
}
})
src/main.js
次にmain.jsを見ていきましょう。
1行目のimport { createApp } from 'vue'は、vueモジュール自体の読み込みです。
こちらを書かないとVueのモジュールが利用できません。
2行目のimport App from './App.vue'は、作成したVueアプリケーションの読み込みをしています。
4行目のcreateApp(App).mount('#app')は、Vueアプリケーションをどこに埋め込むかを指定しています。#appの#はcss セレクタと同じで、idを指しています。
先程のpublic/index.htmlに<div id="app"></div>があったかと思いますが、こちらに埋め込まれます。
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
src/App.vue
Vueアプリケーションのルートになる単一コンポーネントです。
単一コンポーネントはHtmlのテンプレートを扱う<template>タグ、ロジックを扱う<script>タグ、スタイルを扱う<style>タグを1つのファイルで扱います。
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</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>
templateではレンダリングされるHtmlの要素を記載します。今回3行目にHellowWorldとHtmlでは使われないタグがありますが、これは別の単一コンポーネントファイル宣言することで利用することが出来るようになります。
次にscriptですが、主にロジックについて記述したり、利用するデータの宣言をします。先程Templateタグ内にHelloWorldタグを使用しましたが、こちらを認識させるために、7行目のimport HelloWorld from './components/HelloWorld.vue'でHelloWorld変数に./components/HelloWorld.vueファイルのコンポーネントを格納し、12行目でコンポーネントとして認識させていいます。こちらを行うことで、template
タグ内でHellowWorldタグが利用できるようになります。
最後にstyleですが、そのままの通り、CSSとして記述した内容が出力されます。
最後に
今回の講座で覚えておいてもらいたいことは下記です。
- Vueファイルとindex.html、main.jsの連携について
- Vueファイルの中身の大枠
中規模以上のプロジェクトでは、単一コンポーネントを利用しアプリケーションを作っていくことが多いと思います。 Vueファイルの基礎は今後のアプリケーションを作成で躓かないためにも、確りと覚えておきましょう。