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が初期から備わっているので導入手間が要らない。コーディングに集中できるのは利点かも。
この記事が気に入ったらサポートをしてみませんか?