【プログラミング】vue cliの使い方

前回、vuecliをインストールする方法をお伝えしましたが、今回はその基本的な使い方について記載したいと思います。
久しく、コードを書いていなかったので、正月ボケを治すという意味でもいい勉強になりました。

xinformation.hatenadiary.com

vue cliとは

vue.jsを使用したアプリケーションを開発するための環境を作るためのツールです。
動く画面を作るだけなら爆速でつくれます。
Reactでも可能ですが、動くものを作るというゴールではvueの方が覚えることが少ないので早いと思います。

プロジェクトを作成する

コマンド一発でプロジェクトを作成することができます。
とくにこだわりがなければ、vueの3系を選びましょう。

vue create projectName

開発用サーバーを立ち上げる

開発用サーバーを立ち上げます。
こちらもコマンド一発なので、非常に開発環境を作るのが簡単です。

npm run serve

とくに問題がなければ下記のようなページが表示されます。
基本的に、この画面をカスタマイズしていくことになります。

f:id:xinformation:20220104155615p:plain

ファイルの更新のたびに自動コンパイルされるのが便利

vuecli特有の機能というわけではありませんが、ファイルを更新するたびに自動コンパイルされて作業効率が高いです。
Reactとかでもできるのですが、こうした仕組みを予め設けてくれるのは非常にありがたいです。 <自動コンパイル> f:id:xinformation:20220104191551g:plain

<エラーが合ってもIDE上ですぐに発見できる> f:id:xinformation:20220104191638g:plain

フォルダ構成を確認

作成したプロジェクトの配下はこんな感じです。
全て理解するのは時間がかかってやる気が削がれるので内容理解は慣れてからでいいです。
App.vueを改造して、動くものを作りましょう。

f:id:xinformation:20220104160011p:plain

vue ファイルの構造

vueファイルには、画面部品を構成する[template]画面部品の動きを定義する[script]画面部品の見た目を決める[style]から成ります。
まあ、よくあるhtml, javascript , cssの関係ですね。

初期画面を表示していたファイルの記述内容は下のようになっています。

<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>

vueを理解するのにはシンプルで良い例なのですが、情報量が多いのでシンプルなボタンだけを表示します。

<template>
  <button>テスト2</button>
</template>

<script>

</script>

<style>

</style>

htmlのボタンだけ表示されました。
vueとはいえ、プレーンなhtmlのような扱いができるというイメージが持てれば大丈夫です。
f:id:xinformation:20220104162252p:plain

ライブラリを追加する

npm を用いてライブラリを管理します。
地図表示ライブラリとして有名なleafletを導入してみましょう。

npm install leaflet -D

App.vueを下記に変えれば、地図が表示されます。

<template>
    <div id=map_app>
    </div>
</template>

<script>
import  'leaflet/dist/leaflet.css'
import  L from 'leaflet'

export default {
    mounted() {
        const leafletMap=L.map( 'app', { center: L.latLng(51.505, -0.09 ), zoom: 13 } ).addLayer(
            L.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' )
        )
        const icon_marker = L.icon({
          iconUrl:'https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container-bg_4x.png,icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1632-moped_4x.png&highlight=ff000000,0288d1,ff000000&scale=2.0'
        })
        L.marker([51.5, -0.09],{
          icon:icon_marker
        }).addTo(leafletMap)
        
    }
}
</script>

<style>
html, body, #app { height: 100% }
body { margin: 0 }
</style>