Vue.jsでルーティングするwebアプリケーションを作ってみた
以前はReactを触りましたが、並行してVueも作成してみました。VueはCDNでサーバサイドレンダリングの補助に使ったことしかないですが、SPA向けに少しだけ頑張ってみようと思います。
準備
$ npm init -y
$ npm i --save @vue/cli @vue/cli-init
$ npx vue init webpack spa2
? Project name spa2
? Project description A Vue.js project
? Author username <メールアドレス@gmail.com>
? Vue build standalone
? Install vue-router? Yes <=====ここでvue-routerを入れてもらう
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "spa2".
# Installing project dependencies ...
(中略)
$ cd spa2
$ npm run dev
$ tree ./src
./src
├── App.vue
├── assets
│ └── logo.png
├── components
│ ├── HelloWorld.vue
│ ├── page1.vue <=== これから入れる
│ └── page2.vue <=== これから入れる
├── main.js
└── router
└── index.js
初期状態の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
}
]
})
になる。
- src/components/HelloWorld.vue(scriptブロックのみ抜粋)
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
コンポーネント(components)/HelloWorld.vueの中から、
「HelloWorld」と名付けてexportしたテンプレートを利用する。
さらに
- src/App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
で埋め込むコンポーネントの大元を作成し、
- 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/>'
})
でプロジェクトルートにあるindex.htmlの「id="#app"」箇所に
- コンポーネントをまとめたもの
- ルーター
を出力するようです。
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>spa2</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
ここから少しいじってみます。
ルーティングしてみる
routerの調整
first, secondというパスでルーティングしてみます。
ルーティングの定義を記述する。
- src/router/index.js(new Routerの部分のみ修正)
export default new Router({
mode: 'history',
routes: [
{ path: "/", component: first },
{ path: "/next", component: second }
]
})
のようにパスごとの表示ルールを記述した上でRouterインスタンスを作成する。
「mode: ‘history’」とすることで、URLパスの「/#/」をなくすことができる。
ルーティングごとのコンポーネント作成
コンポーネントの構造の基本は、
<template></template>
<scripts></scripts>
<style></style>
で構成していく。
- src/components/first.vue
<template>
<div>
<p>
ここははじめのページです。
</p>
<router-link to="/next">Go to Page1</router-link>
</div>
</template>
<script>
</script>
<style>
</style>
- src/components/second.vue
<template>
<div>
<p>
ここは２ページめです。
</p>
<router-link to="/">Go to Page1</router-link>
</div>
</template>
<script>
</script>
<style>
</style>
Routerで管理しているリンクを生成するには
<router-link to="./行き先のパス">リンク文字列</router-link>
をテンプレート内に配置する。
アプリケーション起動
これでローカルサーバを起動すれば
$ npm run dev
で起動できるはずです。
http://localhost:8080で指示があるのでブラウザからアクセスし、
- /
- /next
でアクセスすれば
現在のページ数が表示されます。
最後に
簡単に作成できて外部APIを連携させるのも楽しそうなので、連携するAPIが用意できしだい、時間のあるときにやってみようと思います。
ではこのへんで！