Vue cliからの環境設定

Nuxtを使わないVue-cliからの環境設定のメモ。

プロジェクト生成

vue init webpack my-project

途中選択肢は好みで。 今回yarnを選択。

Routerの調整　別ページ作成

import Vue from 'vue'
import Router from 'vue-router'
import Meta from "vue-meta"
import HelloWorld from '@/components/HelloWorld'
import AboutPage from '@/components/AboutPage'
Vue.use(Router)
Vue.use(Meta)
export default new Router({
 routes: [
   {
     path: '/',
     name: 'HelloWorld',
     component: HelloWorld
   },
   {
     path:"/about",
     name:"AboutPage",
     component:AboutPage
   }
 ]
})

今回aboutページが欲しいとする。
ComponentにAboutPage.vueを追加し、Routerに適用。これでurlがhttp://localhost:8080/#/aboutこんな感じで飛べる。
ページごとにmetaを変えたいので、

yarn add vue-meta 

Router/index.jsにimportとしてVue.useする。

import Meta from "vue-meta"
Vue.use(Meta)

変更したいmetaがあるページ、今回でいうとAboutPage.vueのscriptに metaInfoオプションで追加。

<script>
   export default{
       metaInfo:{
           title: 'About page', // set a title
           titleTemplate: '%s - Yay!', // title is now "My Example App - Yay!"
           htmlAttrs: {
               lang: 'en',
               amp: undefined // "amp" has no value
           },
           meta:[
               {name: "description",content:"about pageのdescriptionです"}
           ]
               
       }
   }
</script> 

Vuex追加

App.vueと同階層にstoreフォルダを生成、store/index.jsとする。(なんでもいい)

yarn add vuex

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
   state:{
       counter:0
   },
   mutations:{
       addCount(state){
           state.counter += 1
       }
   }
})
export default store

store/index.jsではこのようにstoreを定義。
main.jsにもstoreをimportして読み込む。

import store from "./store"
new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

これで最低限の機能を持ったVueプロジェクトになる。

ビルドする

yarn build

distフォルダが生成され、index.htmlとassetsなどが用意される。
手動でFTPに上げるならビルドして上げる。

Nuxtでやるかどうか

SEO的にはNuxtの方がよいらしい。yarn generateで各ページごとhtmlを生成できるのも便利。サーバーサイドレンダリングされているからもある。
簡単なSPAならvue cliでサクッと作れることは利点。
要検証。

NuxtはRailsと似てる。Nuxt導入すると規約がしっかりと定められvue-metaやvuexが初期から備わっているので導入手間が要らない。コーディングに集中できるのは利点かも。