【Vue.js】Vue CLI の始め方

Web

Vue CLIとは

Vue.jsで大規模なアプリケーションを開発するために、Vue.jsにはCLI(コマンドラインインターフェース)が提供されています。

パッケージ管理ツールとしてnpmかyarn、ビルドツールとしてwebpackがデフォルトが利用されます。

Vue CLIではvueファイルが扱えるようになり、CDNで利用するよりもよりコンポーネントなどが作りやすくなります。

またVuetifyBuefyのようにVue.js用のコンポーネントが用意されていたり、VuexやVue Routerなどのライブラリもより扱いやすくなります。

Vue CLIの始め方

インストール

あらかじめnpmかyarnがインストールされている前提で話を進めていきます。

Vue CLIは以下でインスールができます。

$npm install -g @vue/cli
$yarn global add @vue/cli

これによりvueコマンドが扱えるようになります。以下コマンドでバージョンを確認してみてください。

$vue --version

プロジェクトの作成

以下コマンドでVueプロジェクトを作成できます。

$vue create [project name]

プリセットの選択はとりあえずDefaultでOKです。

しばらくするとproject nameに指定したフォルダが作成されますのでカレントディレクリに設定します。

$cd [project name]

プロジェクトの実行

以下コマンドでプロジェクトを実行します。

$npm run serve
$yarn run serve

ターミナル上にURLが表示されるのでブラウザで表示します。

Vueのマークのあるページが表示されれば完了です。

GUI

Vue CLIにはプロジェクト管理用のGUIが用意されており、以下で起動することができます。

$vue ui

表示されるURLに接続すると管理用ページにアクセスでき、こちらからプロジェクトの作成やパッケージの管理などができます。

今回はGUIの話は割愛します。

フォルダ構成について

生成されたプロジェクトの中で、とりあえずpublicとsrcを覚えておけばある程度の開発は進めることができます。

public

publicはビルドに依存しない静的なファイル置き場となります。

index.html

Vue CLIではindex.htmlをベースにページが生成されます。<div id="app"></div>の部分に各ページの内容が表示されるようになります。

そのためmetaタグなどの設定はここで行う必要があります。

src

srcはビルドされる動的なファイルの置き場となります。

main.js

main.jsではVueオブジェクトの生成を行います。詳細は割愛しますが、以下によりindex.htmlの<div id="app"></div>部分にApp.vueの内容が表示されるようになります。

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

App.vueはVue CLIのベースとなるファイルであり、実際にページに表示される内容になります。vueファイルについては今回割愛しますが、templateタグ内に<img alt="Vue logo" src="./assets/logo.png">と記載されているように、ページに表示されている画像はここで指定されています。

components

Vue.jsではコンポーネントとして部品を作成することができます。コンポーネントについては割愛しますが、作成時にはHelloWorld.vueが作成されており、App.vue内で次のように読み込まれています。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- 読み込んだしたコンポーネントを表示 -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
//コンポーネントの読み込み
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    //コンポーネントの使用を宣言
    HelloWorld
  }
}
</script>

 

- Vue.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました