181125 WindowsでVue.jsを始める

Ionic4がいつまでたってもbeta版のままなので、Vue.jsを触ってみたくなり、以下の本を衝動買い。

改訂新版　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は初心者にとっつきやすいらしいという話を聞いたことがある。上記の本を写経してみる。

===== 開発環境 =====
<code>
Windows 8.1 Pro
Node v8.12.0
VisualStudioCode
</code>

あらかじめ、Node.jsをインストールしているものとします。

Node.jsは、以下のサイトから、Windows(x64)用のLTS版をダウンロードしてインストールします。

https://nodejs.org/ja/

===== WindowsにVue.jsをインストール =====

-C:/ ドライブに、vue/ フォルダを作成する。
-C:/vue/ フォルダを、VisualStudioCodeで開く
-Ctrl+@でコマンドプロンプトを開く
-以下を入力

<code>
npm install -g vue-cli
vue -h
</code>

===== Webpack-simpleテンプレートのダウンロードとセットアップ =====
C:/vue/ フォルダをVisualStudioCodeで開き、Ctrl+@でコマンドプロンプトを開き、以下を入力。

<code>
vue init webpack-simple mymarkdown2
いろいろ聞かれるが、基本的にEnterを押して、最後のUse Sass? だけ、Yes + Enter
</code>

cd mymarkdown2
npm install
npm run dev

自動的にブラウザが開く。

ファイル構造は、Ionic(Angular)と比べてすごく単純である。これはよいかも！？

IonicやAngularと異なり、Vue.jsでは、テンプレートがいろいろあるらしい。。。

今回は、Webpack-simpleテンプレートを使用した。

https://github.com/vuejs-templates/webpack-simple

参考：Vue-cli(webpack)解剖ーディレクトリ構成ー

App.vueを変更

まずは、Hello World!から。

App.vue　というファイルがあるのだが、以下のような構造になっている。

<template>
(ここにhtmlっぽいコードを記載)
</template>

<script>
(ここにjavascriptを記載)
</script>

<style lang="scss">
(ここにscssを記載)
<style>

src/App.vue

27行目の

  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }

を、以下に変更。

  data () {
    return {
      msg: 'Welcome to MyMarkdown2!'
    }

(変更前)

(変更後)

Firebaseのセットアップ

Firebase Hostingにデプロイする。

Googleアカウントがなければ取得しておく。（無料）

以下のリンクから、「プロジェクトを追加」をクリックして、新しいプロジェクトを作成する。

https://console.firebase.google.com/

プロジェクトのページが開いたら、図の　</>　のマークをクリック。

「ウェブアプリにFirebaseを追加」の画面が出てくるので、出てくるコードをメモ帳などにコピーしておく。
（後で、index.htmlに貼りつける。）

index.html

(変更前)

(変更後)

なお、VisualStudioCodeの画面で、Ctrl+C ⇒ Y + Enter を押して、サーバーを止めておく。

そのまま、VisualStudioCodeのターミナルの画面で、以下を入力（初回のみ）

npm install -g firebase-tools
firebase login
// ブラウザが自動的に開くので、「許可」をクリック。
// 過去にログインしている場合は、already logged in as ... と表示される。

Firebase Hostingにデプロイ（アップロード）

そのまま、VisualStudioCodeのターミナルの画面で、以下を入力

firebase init

Hosting を選択して「スペース(Space)キー」を押してから、Enter

今回作成したFirebaseプロジェクトを選択。

public directoryを聞かれるので、 dist と入力してEnter

Configure as a single-page app?と聞かれるので、N + Enter(そのままEnterでも自動的にNが選択される。)

すると、自動的に、以下の２つのファイルが作成される。

.firebaserc
firebase.json

webpack.config.jsの修正

(変更前)

(変更後)

index.htmlの移動と修正

dist/index.htmlを削除する。

index.html　を、dist/ フォルダに移動し、さらに以下のように修正

(変更後)

.gitignoreの修正

今回移動したindex.htmlを、.gitignoreから除外しておく。

(変更前)

(変更後)

buildとdeploy

ターミナルで以下を入力。

npm run build
firebase deploy

表示されたURLを、Ctrlを押しながらクリックすると、ブラウザで開く。

しかし、今回、残念なことに、画像がうまく表示されなかった。。。原因は不明。。。

写経元の本をもう一度読み直したら、webpack.config.js　の8行目を変更し忘れていました。

//(変更前)
publicPath: '/dist/',
//(変更後)
publicPath: '/',

webpack.config.js

(変更前)

(変更後)

もう一度、ターミナルで以下を入力。

npm run build
firebase deploy

これで、ちゃんと、画像も表示された。

今回写経した本

改訂新版　Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）) Kindle版

目次

181125 WindowsでVue.jsを始める

App.vueを変更

Firebaseのセットアップ

Firebase Hostingにデプロイ（アップロード）

webpack.config.jsの修正

index.htmlの移動と修正

.gitignoreの修正

buildとdeploy

今回写経した本