iMind Developers Blog

iMind開発者ブログ

Vue.jsでhello world

概要

vue.jsのインストール、CLIからのプロジェクト作成、hello worldの表示。

バージョン情報

  • nvm 0.36.0
  • node v12.19.0
  • yarn 1.22.10
  • @vue/cli 4.5.7

nvmからnodeとyarnのインストール

nodeはnvmから入れてみる。

https://github.com/nvm-sh/nvm#installing-and-updating

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

インストール可能なバージョン一覧の表示

$ nvm ls-remote-lts

nodeのインストール

# ltsの最新を入れる
$ nvm install --lts
    #=> Now using node v12.19.0 (npm v6.14.8)

# 最新を入れる
$ nvm install node
    #=> Now using node v14.14.0 (npm v6.14.8)

# 現在のバージョン
$ node --version
    #=> v14.14.0

# バージョン12の方を使う
$ nvm use 12
$ node --version
    #=> v12.19.0

# system defaultを12に変える
$ nvm alias default 12

# yarnのインストール
$ npm install -g yarn

@vue/cliのインストール

yarnでインストール

$ yarn global add @vue/cli

これで下記にvueがインストールされる

$ ~/.yarn/bin/vue

上記にPATHが通るように設定。

$ export PATH="$PATH:$HOME/.yarn/bin"

バージョン確認

$ vue --version
    #=> @vue/cli 4.5.7

プロジェクトの作成

vue_exampleという名前でプロジェクトを作成してみる

$ vue create vue_example

vueのバージョンで2か3か選べと言われるが、これを書いている時点ではまだライブラリの3対応が十分でなかった為、2を選択する。

生成されたフォルダに移動。

$ cd vue_example

vue uiというブラウザで動作するプロジェクト管理用機能も存在する。

$ vue ui

現在のディレクトリをimportするとこんな画面が表示される。

f:id:mwsoft:20201017123426p:plain

この画面のタスクからサーバーの起動やデプロイが実行できる。

今回はこのUIは利用せずコマンドで実行する。

サーバーの起動

下記コマンドで8080ポートでサーバーが起動する。

$ yarn run serve

ポートを指定する場合。

$ yarn run serve -- --port 8081

実行すると自動生成されたページが表示される。

f:id:mwsoft:20201017124000p:plain

初期ページをいじってみる

初期ページをいじって「hello ○○」とだけ表示するページを作成する。

まず元になるHTMLは public/index.html にいる。

ここに適当な文字列を追加してみる。

  <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="foo">俺たちゃ海賊 俺たちゃ海賊</div> <!-- この行を追加 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

追加すると自動で検知され、ブラウザを特に更新しなくても画面に打った文字が表示される。

f:id:mwsoft:20201017124102p:plain

続いて src/main.js について。

ここで public/index.html の id="app" にVueで記載したコードがmountされている。

これを例えば下記のように #app と #foo の双方に対して実行すると、2つ同一のが表示される。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

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

続いて src/App.vue とそこから呼び出されている src/components/HelloWorld.vue について。

src/components/HelloWorld2.vue という新しいコンポーネントを生成して、hello ○○とだけ表示される画面を作ってみる。

下記は src/components/HelloWorld2.vue の内容。プロパティとして name という名前で変数を受け取る。

<template>
  <div class="hello">
    <h1>hello {{ name }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld2',
  props: {
    name: String
  }
}
</script>

続いて src/App.vue の編集。HelloWorldをプロパティにmsgを指定して呼び出していたところを、HelloWorld2にしてnameを指定する。

<template>
  <div id="app">
    <HelloWorld2 name="海賊"/>
  </div>
</template>

<script>
import HelloWorld2 from './components/HelloWorld2.vue'

export default {
  name: 'App',
  components: {
    HelloWorld2
  }
}
</script>

f:id:mwsoft:20201017124435p:plain

できあがり。

改定履歴

Author: Masato Watanabe, Date: 2020-10-17, 記事投稿