【Vue.js入門】Vue+Sinatraでブログを作成する① Hello Vue.js World編

14950 ワード
Vue.js Sinatra Vuex vue-cli Sinatra テキストリンク

まえがき

Vue.jsの勉強をしていたら
入門者向けの文献だったり、文法を解説した文献はあるのですが
"じゃあ実際アプリどうやってつくるの?"に答える情報が少なかったので
初心者なりにVue.js + Sinatraでアプリをつくった概要をまとめます。

とにかくこれから学ぶ人がとりあえずつくりきれることを重視して、
ハンズオン形式で記事を書いてみます。
※仔細な説明過不足、誤りなどはご指摘ください。

つくるもの

Vue.js + Sinatraで以下のようなブログアプリをつくります。

想定する読者

  • Vue.jsのチュートリアルはさらっと1周したけど、使い方・全体像がつかめないという方。

チュートリアルをまだやっていない方はこちらへどうぞ。簡単で楽しいです。
https://jp.vuejs.org/index.html

目次

Vue.js+Sinatraでブログを作成する① Hello Vue.js World編
Vue+Sinatraでブログを作成する② MarkdownEditor編 - Qiita

本章の概要

vue-cliを使用して20分ほどでHello Worldを表示します。
vue-routerにも少し触れます。
vueの基本的な文法については触れません

用意するもの

  • npm (筆者のバージョン5.4.2)

まずは環境準備

Vue.jsを使用するためのコマンドラインインターフェイスvue-cliをインストールしましょう

$ npm install -g vue-cli

Vue.jsプロジェクト作成

$ vue init webpack アプリ名

このコマンドを打ち込むとwebpackを用いた環境設定をなんだかいい感じにやってくれます。

プロジェクト作成中にいくつか質問をされますが、
こんな感じでいきましょう。
※後半3つ以外はすべてEnterを押すだけで大丈夫です

? Project name アプリ名
? Project description A Vue.js project
? Author あなたの名前
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests No
? Setup e2e tests with Nightwatch? No

アプリ起動

プロジェクトが作成されたらとりあえずアプリを起動してみましょう。

$ cd アプリ名
$ npm install // パッケージをいろいろインストール
$ npm run dev // 起動

npm run devを実行するとサーバーの起動スクリプト(/build/dev-server.js)が動いて localhost:8080 でアプリが起動されます。

ディレクトリ構成を見てみましょう。

v-log
|--- build = ビルド用のスクリプト
|--- config = 設定(環境変数とかポートとか開発ツールとか)
|--- node_modules = 見ての通りnode_modules
|--- src <= この配下をひたすらいじります！
|　 |--- assets <= 画像とかこの辺に置いてます
|　 |--- components <= 最重要!
|　 |--- router <= vue-routerをつかったrouting
|--- static = 静的ファイル置き場?
index.html = こいつが大元のHTMLになります
etc....

基本的に開発序盤ではsrc配下のファイル群をいじります。

Hello Vue.js World してみる

src/components/HelloWorld.vueのデフォルトの記述を削除して以下のように記述しましょう！

src/HelloWorld.vue

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  name: "HelloWorld",
  data () {
    msg: "Hello Vue.js World!!!"
  }
}
</script>

<style scoped>

</style>

表示されましたね！

App.vue

src/App.vueを見てみましょう。

src/App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</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>

このApp.vueというコンポーネントがすべてのコンポーネントの根っこみたいなやつです。こいつがindex.htmlの#appにどういうわけかすり替わります。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vlog</title>
  </head>
  <body>
    <div id="app"></div> <= これとすり替わる！！！
    <!-- built files will be auto injected -->
  </body>
</html>

HelloWorld.vueはどのように呼び出されているのか

App.vueのテンプレート部分を見てみましょう。

src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

結論、ここのrouter-viewという部分に
各コンポーネントが描画されます。

コンポーネントは与えられたパスに対してマッチしたコンポーネントを描画する関数型コンポーネントです。

router-view · vue-router

vue-router公式にもある通り、
パスに対応してどのコンポーネントを描画するかという設定を記述することができます。

vue-routerでルーティングを書く

ルーティングの記述場所は src/router/index.js です。
デフォルトだとこんなになっています。

src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

ルートパスはブログのトップページに使用したいのでpath: '/'
の部分を変更しましょう。

src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

ブラウザで
http://localhost:8080/#/hello
http://localhost:8080/#/
にアクセスしてみましょう。

ルーティングがきっちり設定されたのが確認できたとおもいます。

最後にsrc/App.vueから画像を消してしまいましょう。

src/App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png"> <= こいつを削除
    <router-view/>
  </div>
</template>

これでひとまずHelloWorldまでは完成です！

第二章に続きます！
Vue+Sinatraでブログを作成する② MarkdownEditor編 - Qiita