Help us understand the problem. What is going on with this article?

Vue CLIでHelloWorld

More than 1 year has passed since last update.

Index

1.VueCLIでHelloWorld
2.VueJSでフォームを使おう
3.VueJSで単一ファイルコンポーネント
4.VueJSでAPI通信
5.VueJSで猫検索アプリ作成
6.おまけ
7.おまけ Rails x Vue.js

8.おまけ Rails x Vue.js x VueX

Vue.jsをお手軽に始められるVueCLIを使って実装を始めます。
とってもお手軽なMVVCフレームワークでコンポーネント(部品)の管理が容易でしかも覚えやすいと評判なので早速試してみましょう。

前提条件

  • HTML,CSS,Javascriptの経験者
  • NPMをインストールしている事
  • MACユーザー
  • ChromeWebDebug機能が使える状態
  • VueJSのデバッガも入れておきましょう
  • vue --version 2.8.1
  • npm --version 3.10.8
  • JS記述式はES6

1.環境構築

1.1.VueCLIのインストール

Node環境には詳しくないので、ぱっと使えるCLIツールで環境構築を片付けます。

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

成功すると8080にアクセスできます
スクリーンショット 2017-02-27 21.21.55.png

Docs for This Templateをクリックしてドキュメントを確認しましょう。

スクリーンショット 2017-02-27 21.25.20.png
上記のようなディレクトリが自動的に作成されます。
シングルページアプリケーションなので、index.htmlが一つだけ設定されています。

1.2. SCSSを有効化

npm install sass-loader node-sass --save-dev

srcに移動して上記コマンドの実行をしましょう。
これをする事でlang="scss"、lang="sass"をstyleに指定できるようになります。

<style lang="scss">
/* write SASS! */
</style>

2.コーディング

サンプルコード1

2.1. TOPページを編集してみる

  • ここからのコード srcに移動してHelloWorldをしていきましょう。 まずは、src/components/の下にあるHello.vueをコピーしてScene1.vueを作成します。 下記の記述を見つけて、msgを書き換えましょう。
    return {
      msg: 'コピーしたHello'
    }

src/router/index.jsにルーティングの設定をします。
今回はHelloを自作のScene1に差し替えしましょう。

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

Vue.use(Router)

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

上記のように書き換えをして、
http://localhost:8080/
にアクセスすると、「コピーしたHello」と表示されます。

2.2. Sceneを更に追加

src/components/の下にScene2.vueを追加しましょう。

Scene2.vue
<template>
  <h2>シーン2だよ</h2>
</template>

router/index.jsにScene2を追加します。

router/index.js
import Scene2 from '@/components/Scene2'

....
    {
      path: '/scene2',
      name: 'Scene2',
      component: Scene2
    }
....

Scene1.vueの中にリンクを追加します。

Scene1.vue
<router-link to="/scene2">Scene2にいくよ!</router-link>

ページ上に現れた、Scene2に行くよリンクから、Scene2だよのページに遷移する事ができます。

スクリーンショット 2017-02-27 22.26.15.png

2.3. ヘッダーを変えてみる

-ここからのコード

常に、vueのロゴが表示されているのが気になりますね。
こちらがどこに記述されているのか調べて変更してみましょう。
App.viewはsrc/main.jsのnew Vue(..)の中で「#app」エレメントの部分に置換されるように記述がしてあります。
さらに、「#app」エレメントはindex.htmlタグのbodyに記載されており、こちらがトップレベルの要素になります。

index.html
 <div id="app"></div>

App.vueに戻ってみます。

App.vue
<router-view></router-view>

こちらのrouter-viewタグには
export default new Router(...)で指定したコンポーネントが置換されます。
router-viewの部分以外を好きなようにカスタマイズします。

今回は共通ヘッダーと共通フッダーをつけていきます。
「Step 2. SCSSを有効化」でscssを有効にしたので、
を忘れずにつけましょう。

App.vue
<template>
  <div id="app">
    <div class="header">
      <img class="img" src="./assets/logo.png">
      <p class="title">Cat LOVER <span>vue</span></p>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
    <div class="footer">
      <h2>Cat LOVER Co., Ltd.</h2>
      <ul>
        <li><a href="" target="_blank">TOP</a></li>
        <li><a href="" target="_blank">リクルート</a></li>
        <li><a href="" target="_blank">アクセス</a></li>
        <li><a href="" target="_blank">会社概要</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss">
html {
  height: 100%;
}
body{
  height: 100%;
  margin: 0;
  background-color: silver;
  text-align: center;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  color: #2c3e50;
  background-color: white;
  width: 80%;
  margin: 0 auto;
  min-width: 600px;
  margin: 0 auto;
  height: 100%;
}
.header {
  display: block;
  .img {
    display: inline-block;
    width: 15%;
    left: 20%;
    display: inline-block;
  }
  .title{
    display: inline-block;
    width: 30%;
    font-size:2rem;
    span{
      font-size: 2.5rem;
      text-shadow: 1px 1px 3px #000;
    }
  }
}
.footer{
  display: block;
  position: absolute;
  bottom: 0%;
  width: 80%;
  min-width: 600px;
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
}
</style>

こんな感じでキレイに外側のレイアウトを作れました。
ようそ.png

MariMurotani
フルスタックエンジニアとして15年働いています。Qiitaはメモ用にはじめました。 最近はRailsとフロントとAWS少しとCI少し。 ガラケーからスマフォに移行した全盛期をフルスタックエンジニアとして自社サービス開発をしながら過ごし、その後ブリッジSEやPM業をしながらシステム開発分野・ウェブサービス事業などで働いています。最近は少しゆっくりRailsを中心に勉強中。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away