VueCLIで簡単にVue.jsの開発環境を整えてHelloWorldを行う
本記事のスコープ
Vue.jsのプロジェクト環境構築をVueCLIで作成し、単一ファイルコンポーネントの考え方でHello World!!を表示するところまでを行います。
VueCLI
VueCLIはVue.js向けのアプリケーション開発環境セットアップを提供する公式のコマンドラインツールです。インストール後にterminalでvueコマンドを実行できるようになります。vue createを実行することで対話形式で簡単にVue.jsの開発環境を整えることができます。今回はこれを利用して簡単に開発環境を作成してみます。
2020/08/06時点での最新版は@vue/cli 4.4.6となっていました。
インストール
（※Node.js version 8.9以上が入っている必要があります）
新しいプロジェクトを作成する
$ vue create <project-name>
コマンドの実行で対話形式のプロジェクト設定が始まります。
（参考：エラーが出る場合は下記リンクによる可能性があります）
osushi-engineer.hatenablog.com
default(babel, eslint)を選択すると、node_modulesにbabelとeslintを導入したシンプルなプロジェクトが作成されます。Manually select featuresを選択すると、導入したいプラグインを選択形式で導入できます。
今回はHello Worldの表示を試したいだけなので、default選択でサッと環境を作成します。
ローカルサーバーを実行
下記のようにコマンドを実行します。
$ cd hello-world
$ yarn serve
ブラウザでhttp://localhost:8000/ にアクセスすると内容を見ることができます。
ファイル構成
でき上がったファイル構成を確認してみます。
現状では下記のファイル群ができあがるようです。
何はともあれHello World
上図のようにロゴの下にHello World!!と表示するようにVueファイルを変更してみます。具体的にはcomponents/HelloWorld.vueとApp.vueに変更を加えることでHello World!!を表示させます。
VueCLIで生成されるファイルは単一ファイルコンポーネントという考え方で構成されています。単一ファイルコンポーネントとは、Vue.jsのコンポーネントを単独のファイルとして作成する機能のことで、各ファイルはcomponentsフォルダーの中に入っています。componentsフォルダーの中に入った小さな部品（コンポーネント）をApp.vueに配置していくイメージです。
vueファイル
ちなみに1つのvueファイルは以下の3ブロックからできています。
- template
- scripts
- style
App.vueファイルを各ブロックごとに見ていきます。
templateブロック
HTML形式でコンポーネントを記述することができるブロックです。
1つのファイルには1つのコンポーネントしか定義できません。
たとえば<div id="app">に並列して<div>hoge</div>と記述してしまうと、
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
というエラーが表示されます。これは、1つのファイル内に2つのコンポーネントが存在するために表示されるエラーです。
子要素に伝えるためのmsgの中身を"Hello World!!"に変更しました。この値はHelloWorld.vueファイルの方で利用されます。
<template>
<div id="app">
</div>
</template>
scriptブロック
ライブラリや他コンポーネントのインポートをこのブロック内で行います。またES2015のJavaScriptでDOM操作などもこのブロックで行います。
ここではcomponents/HelloWorld.vueのコンポーネントを使用するためimportを行っています。
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
components: {
HelloWorld,
},
};
</script>
styleブロック
見た目の制御を行います。標準のスタイル言語はCSSです。
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
次にApp.vueファイルの子要素に当たるHelloWorld.vueを各ブロックごとに見ていきます。
templateブロック
Mustache記法{{ msg }}により親要素から受け取ったmsgをh1タグで表示するようになっています。
ここではh1の中に直接"Hello World!!"と書き"Hello World!!と表示させるコンポーネントにするのではありません。
親要素から受け取った値をh1タグで表示するという書き方をすることにより、
このコンポーネントを別の場面で再利用しやすい設計になっています。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
scriptブロック
親コンポーネントのApp.vueからpropsで受け取るmsgは下のように記述します。
String:文字列で受け取るということを明示しているので、ファイルからどのようなデータがくるかが分かります。
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
},
};
</script>
styleブロック
styleブロックを<style scoped>という記述にすることで、cssの有効範囲をこのファイルに限定できます。
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
a {
color: #42b983;
}
</style>
まとめ
VueCLIでの環境設定は非常に簡単で、勉強したいと思った時にとりあえずvue createすればすぐに勉強を開始できる。出来上がるファイル群もVue.jsのベストプラクティスにそったものとなっているので、出来上がったものを少しづつ修正していろいろ試してみるのが初学時に有効そうだと思います。
