【本】流れ

[becolomochi]

JavaScript ライブラリ Vue.js を使ったポートフォリオサイトの制作記兼解説本

はじめに・注意事項

https://esa-pages.io/p/sharing/3373/posts/406/822629ec33097231b9ee.html

目次

Node.js npm のこと

https://esa-pages.io/p/sharing/3373/posts/408/8e9d83106371b0b1a070.html

• Node.js 「サーバーサイドJavaScript環境」
• JS で便利に色々できる
• npm Node.jsのパッケージ管理ツール
• ダウンロードできる・作ったパッケージをアップロードできる
• Vue.js の CLIパッケージ をダウンロード

はじめてみる

https://esa-pages.io/p/sharing/3373/posts/420/5e6d9c147e0f828e10f4.html

• vue init
• コマンド npm run dev

ファイル構成を見てみる

https://esa-pages.io/p/sharing/3373/posts/427/8f5ff815e239bd86f272.html

• Project Structure · GitBook vue init webpack したときに生成されるファイルの一覧

.vueテンプレート

https://esa-pages.io/p/sharing/3373/posts/419/09eff118e80acbbd5412.html

• プラグイン：vue-loader
• 拡張子 .vue ファイルをシンタックスハイライトするエクステンション
• Brackets Vue

URL のシャープマーク？

https://esa-pages.io/p/sharing/3373/posts/417/88851ab5bf5255287c2a.html

• ヒストリーモードの設定方法 ヒストリーモードの使用 #3

ルーティングってなんだ？

https://esa-pages.io/p/sharing/3373/posts/418/9491bd7687ffbd29e659.html

• プラグイン：vue-router
• ページ作成
• 404ページの作成

ページ作る

https://esa-pages.io/p/sharing/3373/posts/425/05be57607c95aca6cb75.html

• 必要なページをまずダミーで作ってみる
• v-cloak で表示を隠す v-cloak つける #2
• 作品詳細ページの作り方※JSONデータの出力
• 作品一覧ページの作り方※ifとfor

title description の設定

https://esa-pages.io/p/sharing/3373/posts/416/2aa38c0d401a09590908.html

概要

• body以外の場所へページごとの設定
• 作品詳細ページで読み込んだデータをタイトルと description に設定する 作品詳細ページのタイトル出力 #6
• テンプレート全体の設定

• document.title
• meta description

お問い合わせフォームの作成

https://esa-pages.io/p/sharing/3373/posts/421/23dfe9ca7b60d518d5f3.html

• GASで作ってみた例

デザイン transition

https://esa-pages.io/p/sharing/3373/posts/449/487800fa97f728325c2c.html

• デザイン作成
• ページ遷移に Transition をつけてフワッと表示させる例 transition #7

アップロード

https://esa-pages.io/p/sharing/3373/posts/450/5223e6be9203dd73325d.html

• npm run build
• サーバーにアップ
• ヒストリーモードのため htaccess に要記述

コラム

• 動かない・表示されないときのチェックリスト
• 作成中にお世話になったサイト

• Vue.js 公式
• Awesome Vue.js

[becolomochi]

仕上がった目次

はじめに 2
Node.js ？ npm ？ vue-cli ？ 6
vue-cli で始めてみる 8
ファイル構成を見てみる 11
.vue テンプレート 14
URL のシャープマーク？ 16
ルーティングのこと 18
ページを作成する 22
リンクを設定する 26
json データから作品ページを作る 28
title description の設定 34
お問い合わせフォームの作成 38
サイトの見た目を良くする 42
アップロードする 46
おわりに 48

ダウンロード出来ます

https://booth.pm/ja/items/667217