Vue.js + Vue-cli + bulmaで作るSPA

SPAを作ってみたいなあ、と思って実際に作ってみたのでメモです。

実際にページを作成してSPAを試してみたかったのでcss フレームワークbulmaを使って作りました。

こんな感じのページができます。

https://cidermitaina.github.io/spa-page/#/

（vue init webpackでできるVueアプリケーションの中身解説が多めです。bulmaの使い方は触れません。）

1.vue-cli のインストール

Vue.jsを使う環境を準備するためのコマンドラインインタフェースをインストールします。

vue-cliでインストールを行うとVue.jsの環境をものすごく簡単に構築できます。

npm install -g vue-cli

2.プロジェクトを作成

vue init webpack プロジェクト名

3. ローカルで確認する

cd プロジェクト名

npm run dev

ブラウザで http://localhost:8080/ をアクセスするとサンプルが表示されます。

4.Vueアプリケーションの中身は？

npm run build

をすると実際に動くソースが作られます。（./dist フォルダ）

├── dist
  ├── index.html
  └── static
      ├── css
      └── js

./dist/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>spa-site</title><link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
</head>
<body>
  <div id=app></div>
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js>
</script>
<script type=text/javascript src=/static/js/vendor.7fed9fa7b7ba482410b7.js>
</script>
<script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script>
</body>
</html>

index.html → buid → ./dist/index.htmlになったみたいです。

./src/main.js

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

./src/App.vueをコンポーネントとして登録しているようなので見てみます。

./src/App.vue

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

<router-view/>?

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で'/'にアクセスすると、<router-view/>にHelloWorld.vueが表示される

import HelloWorld from '@/components/HelloWorld'の＠って？

webpack.base.conf.jsの

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

にsrc ディレクトリの alias を定義しています。

Webpack を使っていてファイルの相対パスを書くのがつらくなったとき - kitak blog

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

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

dataで持っているmsgの値を{{ msg }}で表示しています。 Vue単一コンポーネントはコンポーネントスコープCSSという機能があり、<style scoped>の部分でスコープ宣言されてます。これによって、CSSが他のコンポーネントに影響を与えることなく分離し、CSSの管理がしやすくなります。

5. 中身を変更していく

中身が理解できたところで、編集してページを作成していきます。

1.ルーティングの設定

まずはコンポーネントファイルを作成します。 HelloWorld.vueをコピーして、必要なページ分作成します。今回はtopページ、aboutページ、noteページ、apiページ、contactページを作成します。

├──components
  ├── about.vue
  ├── api.vue
  ├── contact.vue
  ├── note.vue
  └── top.vue

次にルーティングの設定です。

./router/index.jsを編集します。

import Vue from 'vue'
import Router from 'vue-router'
import top from '@/components/top'
import about from '@/components/about'
import note from '@/components/note'
import api from '@/components/api'
import contact from '@/components/contact'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'top',
      component: top
    },
    {
      path: '/about',
      name: 'about',
      component: about
    },
    {
      path: '/note',
      name: 'note',
      component: note
    },
    {
      path: '/api',
      name: 'api',
      component: api
    },
    {
      path: '/contact',
      name: 'contact',
      component: contact
    }
  ]
})

2.リンクの設定

次にApp.vueを編集してリンクをつけていきます。

<ul>
  <li>
    <router-link to="/">Top</router-link>
  </li>
  <li>
    <router-link to="about">About</router-link>
  </li>
  <li>
    <router-link to="note">Note</router-link>
  </li>
  <li>
    <router-link to="api">Api</router-link>
  </li>
  <li>
    <router-link to="contact">Contact</router-link>
  </li>
</ul>

これで仕組みは完成です。あとは、ページを作成していきます。

3.bulmaのinstall

bulmaをinstallします。

npm install bulma

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

App.vueにbulma本体のimportの記述を追記します。

<style lang="scss">
@import "../node_modules/bulma/bulma.sass";
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

これでbulmaを使って簡単にページを作成できるようになりました。

あとは、自由にbulmaを使ってページを作成していくだけです。

思ってたよりも簡単にできました◎

今回はbulmaを使ってページを作る手順は省略しますが、公式を見れば詳しく書いてあるので簡単に作れちゃうはずです。

bulma.io

今回作成したページのソースを参考に貼っておきます。

github.com