Vue.js (4) vue-cliと単一ファイルコンポーネント（vueファイル）

vue-cliとは

npmのモジュールで、Vue.jsを使ったプロジェクトを管理するツール。テストサーバを立てたり、デプロイするためにbuildしたりすることができる。

インストール

node.jsがインストール済みとして、npmで下記のコマンドでインストールする。node.jsはサーバサイドで使うイメージがあるが、vue-cliにも使う。

npm install -g @vue/cli

プロジェクト作成

vue create myproject

単一ファイルコンポーネント（vueファイル）の作成

vue componentは.vueファイルにまとめることができる。componentはhtmlに当たる「template」、Javascriptにあたる「script」、cssにあたる「style」の3つの部分からなるが、それらを1つのファイルに記述することで見通しよく記述することができる。

<template>
    <div class="test">
        This is test page. message: {{ message }}
    </div>
</template>

<script>
export default {
    name:"test",
    props:{
        message:String
    }
}
</script>

<style>
/* css */
</style>

このようなvueコンポーネントファイルをsrc/components直下に置く。こうすることで、再利用可能なcomponentファイルを作ることができる。

作ったcomponentを使うには、App.vueファイルのtemplate部分で使うほかに、script部分にimportを書く。

<script>
import test from "./components/test.vue"

export default {
  name: 'app',
  components: {
    HelloWorld,test
  }
}
</script>

テスト

下記のコマンドによってテストサーバを立てることができる。

npm run serve

これでhttp://localhost:8080にアクセスすると、App.vueに記述したサイトが確認できる。