差分

このページの2つのバージョン間の差分を表示します。

--- z_blog:2018:181125_vue_install [2018/11/25] – [Webpack-simpleテンプレートのダウンロードとセットアップ] adash333
+++ z_blog:2018:181125_vue_install [2018/11/25] (現在) – [今回写経した本] adash333
@@ 行 1: / 行 1: @@
 ====== 181125 WindowsでVue.jsを始める ======
 Ionic4がいつまでたってもbeta版のままなので、Vue.jsを触ってみたくなり、以下の本を衝動買い。
+[[https://amzn.to/2SeJXxX|改訂新版　Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）) Kindle版]]
 <html>
@@ 行 54: / 行 56: @@
 {{:z_blog:2018:pasted:20181125-181025.png}}
-{{:z_blog:2018:pasted:20181125-181122.png}}
+{{:z_blog:2018:pasted:20181125-195822.png}}
 自動的にブラウザが開く。
 {{:z_blog:2018:pasted:20181125-181155.png}}
+ファイル構造は、Ionic(Angular)と比べてすごく単純である。これはよいかも！？
+{{:z_blog:2018:pasted:20181125-200003.png}}
 IonicやAngularと異なり、Vue.jsでは、テンプレートがいろいろあるらしい。。。
-今回は、Webpack-simpleテンプレートを使用する。
+今回は、Webpack-simpleテンプレートを使用した。
 https://github.com/vuejs-templates/webpack-simple
@@ 行 68: / 行 74: @@
 参考：[[https://qiita.com/h_plum/items/86b8a6a86ac0fea8a4d1|Vue-cli(webpack)解剖 ーディレクトリ構成ー]]
+===== App.vueを変更 =====
+まずは、Hello World!から。
+App.vue　というファイルがあるのだが、以下のような構造になっている。
+<code>
+<template>
+(ここにhtmlっぽいコードを記載)
+</template>
+<script>
+(ここにjavascriptを記載)
+</script>
+<style lang="scss">
+(ここにscssを記載)
+<style>
+</code>
+src/App.vue
+行目の
+<code>
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+</code>
+を、以下に変更。
+<code>
+  data () {
+    return {
+      msg: 'Welcome to MyMarkdown2!'
+    }
+</code>
+(変更前)
+{{:z_blog:2018:pasted:20181125-200358.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181125-201853.png}}
+===== Firebaseのセットアップ =====
+Firebase Hostingにデプロイする。
+Googleアカウントがなければ取得しておく。（無料）
+以下のリンクから、「プロジェクトを追加」をクリックして、新しいプロジェクトを作成する。
+https://console.firebase.google.com/
+{{:z_blog:2018:pasted:20181125-204743.png}}
+{{:z_blog:2018:pasted:20181125-204904.png}}
+{{:z_blog:2018:pasted:20181125-204943.png}}
+プロジェクトのページが開いたら、図の　</>　のマークをクリック。
+{{:z_blog:2018:pasted:20181125-205048.png}}
+「ウェブアプリにFirebaseを追加」の画面が出てくるので、出てくるコードをメモ帳などにコピーしておく。
+（後で、index.htmlに貼りつける。）
+{{:z_blog:2018:pasted:20181125-205205.png}}
+index.html
+(変更前)
+{{:z_blog:2018:pasted:20181125-205341.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181125-205758.png}}
+なお、VisualStudioCodeの画面で、Ctrl+C => Y + Enter を押して、サーバーを止めておく。
+{{:z_blog:2018:pasted:20181125-205904.png}}
+そのまま、VisualStudioCodeのターミナルの画面で、以下を入力（初回のみ）
+<code>
+npm install -g firebase-tools
+firebase login
+// ブラウザが自動的に開くので、「許可」をクリック。
+// 過去にログインしている場合は、already logged in as ... と表示される。
+</code>
+{{:z_blog:2018:pasted:20181125-210540.png}}
+{{:z_blog:2018:pasted:20181125-210619.png}}
+===== Firebase Hostingにデプロイ（アップロード） =====
+そのまま、VisualStudioCodeのターミナルの画面で、以下を入力
+<code>
+firebase init
+</code>
+{{:z_blog:2018:pasted:20181125-211039.png}}
+Hosting を選択して「スペース(Space)キー」を押してから、Enter
+{{:z_blog:2018:pasted:20181125-211221.png}}
+今回作成したFirebaseプロジェクトを選択。
+{{:z_blog:2018:pasted:20181125-211339.png}}
+public directoryを聞かれるので、 dist と入力してEnter
+{{:z_blog:2018:pasted:20181125-211614.png}}
+Configure as a single-page app?と聞かれるので、N + Enter(そのままEnterでも自動的にNが選択される。)
+{{:z_blog:2018:pasted:20181125-211852.png}}
+すると、自動的に、以下の２つのファイルが作成される。
+<code>
+.firebaserc
+firebase.json
+</code>
+==== webpack.config.jsの修正 ====
+(変更前)
+{{:z_blog:2018:pasted:20181125-212244.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181125-212504.png}}
+==== index.htmlの移動と修正 ====
+dist/index.htmlを削除する。
+{{:z_blog:2018:pasted:20181125-212942.png}}
+index.html　を、dist/ フォルダに移動し、さらに以下のように修正
+{{:z_blog:2018:pasted:20181125-213032.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181125-213205.png}}
+==== .gitignoreの修正 ====
+今回移動したindex.htmlを、.gitignoreから除外しておく。
+(変更前)
+{{:z_blog:2018:pasted:20181125-213335.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181125-213412.png}}
+==== buildとdeploy ====
+ターミナルで以下を入力。
+<code>
+npm run build
+firebase deploy
+</code>
+表示されたURLを、Ctrlを押しながらクリックすると、ブラウザで開く。
+{{:z_blog:2018:pasted:20181125-213914.png}}
+しかし、今回、残念なことに、画像がうまく表示されなかった。。。原因は不明。。。
+{{:z_blog:2018:pasted:20181125-214005.png}}
+写経元の本をもう一度読み直したら、webpack.config.js　の8行目を変更し忘れていました。
+<code>
+//(変更前)
+publicPath: '/dist/',
+//(変更後)
+publicPath: '/',
+</code>
+webpack.config.js
+(変更前)
+{{:z_blog:2018:pasted:20181125-223644.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181125-223723.png}}
+もう一度、ターミナルで以下を入力。
+<code>
+npm run build
+firebase deploy
+</code>
+{{:z_blog:2018:pasted:20181125-225815.png}}
+これで、ちゃんと、画像も表示された。
+{{:z_blog:2018:pasted:20181125-225852.png}}
 ===== 今回写経した本 =====
+[[https://amzn.to/2SeJXxX|改訂新版　Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）) Kindle版]]
 <html>
 <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07HXMHQQK&linkId=0e00aed7bf793408cd3bbaf34c8bad45"></iframe>
 </html>
+===== Vue.js関連ドキュメント =====
-===== リンク =====
+本家サイト\\
 https://jp.vuejs.org/v2/guide/index.html
 {{:z_blog:2018:pasted:20181125-173232.png}}
+Vue Router(ルーティング)\\
+https://router.vuejs.org/ja/
+{{:z_blog:2018:pasted:20181125-194600.png}}
+Vuex（状態管理）\\
+https://vuex.vuejs.org/ja/
+{{:z_blog:2018:pasted:20181125-194706.png}}
+Nuxt.js(フルスタックフレームワーク、AngularやRuby on Railsのようなもの)\\
+https://ja.nuxtjs.org/guide/installation
+{{:z_blog:2018:pasted:20181125-194914.png}}
+===== リンク =====
 [[https://blog.nagisa-inc.jp/archives/2980|2018年2月6日なぜプ ロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 Yutaro Miyazaki]]