20190502の新人プログラマ応援に関する記事は2件です。

【VSCode】1ファイル内の複数箇所を置換 〜Mac版〜

1ファイル内の複数箇所を置換

今回、コメントアウトした部分を飛ばして、複数箇所を置換したくて、このやり方を使いました。もっといいやり方があれば教えてください。

やり方

  • 置換したい箇所のどれか一つを選択(いっちゃん上を選択するといいかな)。
  • option + command + F で置換の窓を開き、置換後のテキストを打ち込む。
  • 一個ずつ置換し、置換したくない箇所は"→"で飛ばす。

実際の様子

vscode_1.gif

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Vue3.x系で作ったアプリをFirebaseにデプロイするまでの流れ【初心者向け】

vue.jsでWebアプリを作ってそれをFirebaseにデプロイするまでにやったことをまとめました。

途中躓いたところが何個かあったので、備忘録として。

環境とかバージョンとか

  • Mac OS Mojave(10.14.3)
  • npm 6.9.0
  • vue-cli 3.5.1
  • firebase 6.5.0

1.vue.jsで何かしらアプリを作る

まずはvue-cliというツールをインストールします。
こちらの記事を参考にさせてもらいました。

Vue.js を vue-cli を使ってシンプルにはじめてみる

vueには2.x系と3.x系があり、firebaseにデプロイする際の手順で微妙に違いがあるそうです。
今回は最新の3.5.1を使いますので2.x系の話は割愛してます。

$ vue --versionとかで確認しておくと吉。

$ npm run buildを実行してdist配下にデプロイする用のファイルを置いておきます。

2.firebase側の準備

Firebaseに今回作成したアプリをデプロイする用のプロジェクトを作る必要があります。
GoogleアカウントでFirebase開き、コンソールから「プロジェクトを追加」をクリックします。

スクリーンショット 2019-03-24 19.13.19.png

そして、firebaseにログイン。

$ firebase login

ここでいろいろ英語で聞かれると思いますが、言われたとおりにハイハイ言っておきます。
(ブラウザに飛んで許可するか聞かれるはず)

ログインが終わったらプロジェクトIDをメモっておきます

$ firebase list
┌───────────┬───────────────────────┬─────────────┐
│ Name      │ Project ID / Instance │ Permissions │
├───────────┼───────────────────────┼─────────────┤
│ Cash Book │   プロジェクトID       │ Owner       │
└───────────┴───────────────────────┴─────────────┘

次にさっきのvueのアプリがあるディレクトリまで行き、initを実行。

$ firebase init --project=[FirebaseのプロジェクトID]

AAでFIREBASEと表示され、つらつらと色々聞かれます。

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

/workspace/vue/vue-cli-test/test-prj

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
 Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

i  Using project hogehoge 

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory?

設定のあれこれを聞かれますが、基本的にはEnter連打でOK. (Y/n)で聞かれる質問はEnterを押すと大文字の方(Yes)を自動で選択してくれるようになっています。

ただし、? What do you want to use as your public directory?はvueのdistフォルダを指定しましょう。
(あとから変更可能です)

デフォルトではpublicフォルダが選択されますが、vueではdist配下にソースが格納されるのでdistに指定しなければいけません。

3.firebaseにアプリをデプロイする

$firebase deployでサーバーにアプリをデプロイします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む