frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【SPA】Vue.jsで静的サイトの作り方まとめ

スポンサードリンク


スポンサードリンク


Vueで通常の静的サイトを作成するための手順をまとめました。
あくまで数ページの小規模サイトのSPAを想定しています。

Vue cilでインストール

$ vue init webpack my-project

www.frontendmemo.xyz

ディレクトリ、ファイル構成

├─App.vue
├─assets
│ ├─common
│ ├─各画像
│ ├─style
│ │ ├─_base.scss
│ │ ├─_module.scss
│ │ ├─_structure.scss
│ │ ├─_top.scss
│ │ └─_var.scss
│ └─top
│ └─各画像
├─components
│ ├─About.vue
│ ├─Company.vue
│ ├─Corporation.vue
│ ├─Flow.vue
│ ├─include
│ │ ├─Footer.vue
│ │ ├─Gnav.vue
│ │ └─Header.vue
│ ├─Price.vue
│ └─Top.vue
├─main.js
└─router
└─index.js

Vue router

/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Top from '@/components/Top'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
mode: 'history',
scrollBehavior(to, from, savedPosition) {
const selector = location.hash
return selector ? { selector } : { x: 0, y: 0 }
},
routes: [
{
path: '/',
name: 'Top',
component: Top
}, {
path: '/Hello',
name: 'Hello',
component: Hello
}
]
})

↓ハッシュタグの削除は下記部分

mode: 'history',
scrollBehavior(to, from, savedPosition) {
const selector = location.hash
return selector ? { selector } : { x: 0, y: 0 }

include

includeのディレクトリ構成

include
    ├─include
         ├─Footer.vue
         ├─Gnav.vue
         └─Header.vue

includeファイルの読み込み
App.vue

export default {
components: {
HeaderComponent: HeaderComponent,
GNavComponent: GNavComponent,
FooterComponent: FooterComponent
}
}

.htaccessの設置

ダイレクトにトップ意外にアクセスすると404になってしまうのを防ぐ
.htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

scssの導入

npm install sass-loader node-sass --save-dev
<style lang="scss">
@import "./assets/style/_var.scss";
@import "./assets/style/_base.scss";
@import "./assets/style/_structure.scss";
@import "./assets/style/_top.scss";
@import "./assets/style/_module.scss";
</style>


ビルド

npm run build

公開
生成されたdist以下をアップして公開になります。

以上、Vue.jsで静的サイトの作り方まとめでした。