初心者が初めてvue.jsを触ってみる

はじめに

最近だんだんと投稿の質が落ち、くだらない備忘録を垂れ流し続けている新卒エンジニアです。
この未経験からスタートした半年は研修とPHP/Laravel中心の業務でした。
新しく半期が始まったということもあり、弊社では新卒にも自分で決めた目標が課されます。
今回は目標にした、新しい技術を使ってアウトプットをするという目標の第０章になります。
最終的な成果としては、Vue.jsを使ってSPAのポートフォリオサイトを公開しようと思っております。
その前段で、触ったことのないVue.jsを触ってみたという投稿です。

現状のスキル

サーバーサイド言語はPHPとRubyを少し触ったことがある
フロントエンドはHTML/CSSの読み書きができる、JavaScriptも調べながらなら書ける程度です。

Vue.jsインストール

$ mkdir vue-study
$ cd vue-study/
$ npm install -g vue-cli
$ vue init webpack my-project

@567000 さんのVue.js を vue-cli を使ってシンプルにはじめてみるを見様見真似でここまでは順調に進みます。

いくつか質問されますが、vue-routerも使ってみたかったため、僕は全部Enterを押していましたw

To get started:

  cd my-project
  npm run dev

と言われたので実行します。

Your application is running here: http://localhost:8080

うまく言ったみたいです。
いざアクセス。

すると、ERR_CONNECTION_RESETのエラーが。
ネットで調べていくとどうやらESETというセキュリティソフトが悪さをしているそうです。
会社のパソコンなのでソフトの設定を緩くするわけも行かないので設定ファイルを見に行きます。

config/index.js

    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

15行目くらいにありました。ここのportの番号を変えてあげるとアクセスできるようになります。

この後https://orizuru.io/blog/vue-js/vue-01/の内容を丸コピしながら学習をしました。

やったこと

• routerを使っての画面遷移
• データバインディングによるテキストの受け渡し

まずはsrc/routes/index.jsに見様見真似でルーティングを追加して行きます。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/components/About'
import Skill from '@/components/Skill'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/About',
      name: 'About',
      component: About
    },
    {
      path: '/Skill/:msg',
      name: 'Skill',
      component: Skill,
      props: true
    }
  ]
})

この時点で、ここに遷移のページ分だけ足せばいいんだなと理解。

今度は対応するvueファイルを追加して行きます。

src/components/About.vue

<template>
    <div class="hello">
        <h1>About</h1>
        <p>
            <router-link to="/">HelloWorld</router-link>
        </p>
    </div>
</template>

<script>
    export default {
        name: 'About',
    }
</script>

src/components/Skill.vue

<template>
    <div class="hello">
        <h1>Skill</h1>
        <h1>{{ msg }}</h1>
        <p>
            <router-link to="/">HelloWorld</router-link>
        </p>
    </div>
</template>

<script>
    export default {
        name: 'Skill',
        props: [ 'msg' ]
    }
</script>

src/components/HelloWorld.vue

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <input type="text" v-model="msg">
        <p>
            <router-link to='/About'>About</router-link>
            <router-link :to="'/Skill/' + msg">Skill</router-link>
        </p>
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

このファイルは<router-link :to="'/Skill/' + msg">Skill</router-link>のところでmsgを渡している。
これがSkill.vueに行った時に渡したものを表示してくれる。

まとめ

浅い理解だが、

（親）index.html ←　（子）　main.js ←　（孫）　HelloWorld.vueという入れ子構造でデータがimport,exportされているのかな。。。となんとなく雰囲気はつかめた（？）

とにかく、実際に動くページができたのでよかった。半年でしっかり成果作って完成物はもっと丁寧にアップします。