- 投稿日:2020-06-21T23:37:10+09:00
error Expected linebreaks to be 'LF' but found 'CRLF'
起こったこと
Windows で、
vue.js の web アプリをローカルで動かしてて
App.vue
を編集したら
以下のエラーメッセージが画面いっぱいに出ました。(スクショ撮っておけばよかった)error Expected linebreaks to be 'LF' but found 'CRLF'
改行コードが違うよってやつです。
やったこと
それで、以下の対処をしたらエラー消えました。(正しいのかはわかりませんが、実際に消えたので一応 記しておきます)
- いったん実行を止める
.eslintrc.js
のrules
ブロックに'linebreak-style': ['error', 'windows'],
を追加、保存- もう一度
npm run serve
ESLint
.eslintrc.jsmodule.exports = { (略) rules: { 'linebreak-style': ['error', 'windows'], (略) }, };他の方法あるよって方は教えてください
- 投稿日:2020-06-21T23:37:10+09:00
エラー対処:error Expected linebreaks to be 'LF' but found 'CRLF'
起こったこと
Windows で、
vue.js の web アプリ (git clone してきた) をローカルで動かしてて
App.vue
を編集したら
以下のエラーメッセージが画面いっぱいに出ました。(スクショ撮っておけばよかった)error Expected linebreaks to be 'LF' but found 'CRLF'
改行コードが違うよってやつです。
やったこと
それで、以下の対処をしたらエラー消えました。(正しいのかはわかりませんが、実際に消えたので一応 記しておきます)
- いったん実行を止める
.eslintrc.js
のrules
ブロックに'linebreak-style': ['error', 'windows'],
を追加、保存- もう一度
npm run serve
ESLint
.eslintrc.jsmodule.exports = { (略) rules: { 'linebreak-style': ['error', 'windows'], (略) }, };その後
Git for Windows が改行コードをよしなにやってくれる機能が起因しているっぽいとお聞きしたので
$ git config --global core.autocrlf inputしておいた
- 投稿日:2020-06-21T21:51:34+09:00
【Vue】filtersでthisが使えない
Vueの
filters
でthis
が使えなかった話Vue.jsのfiltersで↓のようなコードを書いて実行しようとしたらエラーがでた。
最初はMixinとして使っていたためMixinでは
filters
は使えないのかと思い、普通にコンポーネント内のfilters
プロパティ内で使っても同じエラーがでたので調べることにした。ちなみに
filters
というのはVue固有のプロパティの一つで、ここに定義した関数をムスタッシュ構文内で例えば{{ <data> | oneFilter }}
のようにして使うと<data>
をoneFilter
で加工することができる。<template> <div id="app"> <p>{{ '選択してください' | processChoice }}</p> </div> </template> <script> new Vue({ el: '#app', computed: { getName (obj) { if (obj) { return obj.name } } }, filters: { processChoice(value) { if (this.getName) { return this.getName } return value } } }) </script>エラーメッセージCannot read property 'getName' of undefined...結論
先に結論を書いてしまうと、「Vueの
filters
プロパティではthis
(Vueインスタンス)にはアクセスできないようなので、computed
かmethods
を使いましょう」ということらしいです。
filters
で定義した関数内からthis
にアクセスできないので、undefined
エラーが出ているということですね。調べたこととか
1番目のリンクのissueに対する回答で、Evan You(Vue.jsの作者)がfiltersでは敢えてVueインスタンスにアクセスできないようににしていると言っています。filtersでは純粋なJSの関数を使うことしか現状できないようです。どうしても
this
を使う必要がある時は結論に書いたようにfilters
ではなく、computed
かmethods
に処理をまとめて書いてそれを使いましょう。(compoted
とmethods
もムスタッシュ構文に埋め込むことが可能です。)何人かの開発者がfilters内で
this
を使えるようにして欲しいと書いていますが、
作者が↓のように言っているのでVue3系でも同じ仕様になるような気がします。I'm absolutely convinced that filters must have a way access the context. The question's what core team is going to do about it?
Sorry but my opinion has not changed: filters should not, and will not have access to context. If you need context, use a method.
- 投稿日:2020-06-21T20:04:39+09:00
【Vue】学習開始2週目で覚える内容
2週目で学ぶべきこと
- v-model
- 名前付きslot
- スコープ付きslot
- 動的コンポーネント
- ライフサイクルフック
v-model
- v-modelディレクティブ:
formのinput要素
に対して、データバインディング
を行う際に使用する- データバインディング:データと表示を結びつけ、
双方向
に変更を反映させることApp.vue<template> <div> <!-- sampleオブジェクト内のanswerを参照する --> <input v-model="sample.answer"> <p>{sample.answer}</p> </div> </template> <script> export default { data() { return { //オブジェクト名:sample プロパティ名:answer sample: { answer: "Hello World!" } } } }; </script>名前付きslot
- slot:
親コンポーネント
から子コンポーネント
にテンプレートを差し込む機能◆ 親コンポーネント
App.vue<template> <div> <Child> <!-- 子コンポーネントの"slot name"で参照される --> <template v-slot:sample> <h1>親コンポーネントの表示</h1> </template> <!-- 子コンポーネントの"slot name"で参照される --> <template v-slot:answer> <!-- dataプロパティ参照 --> <p>{{word}}</p> </template> </Child> </div> </template> <script> export default { data() { return { word: "good morning!" } } };◆ 子コンポーネント
Child.vue<template> <div> <!-- 親コンポーネント"v-slot:sample"を参照する --> <slot name="sample"></slot> <hr> <p>Hello World!</p> <hr> <!-- 親コンポーネント"v-slot:answer"を参照する --> <slot name="answer"></slot> </div> </template>スコープ付きslot
子コンポーネントslotに渡されたprops
に、親コンポーネント
からアクセスすること◆ 子コンポーネント
Child.vue<template> <div> <!-- dataプロパティの"word"を、slotに設定する --> <!-- ※sampleは"任意の属性名"を設定する --> <slot name="sample" v-bind:sample="word"></slot> </div> </template> <script> export default { data() { return { word: "good morning!" } } };App.vue<template> <div> <Child> <!-- 子コンポーネントの v-bind sample="word" が参照される --> <!-- "slotProps"は任意の属性名"を設定する --> <template v-slot:sample="slotProps"> <!-- slotPropsは"template内"で使用可能 --> <h1>{{ slotProps }}</h1> </template> </Child> </div> </template>動的コンポーネント
コンポーネント間の切り替え
をスムーズに行う目的で使用する◆ 子コンポーネント
Child.vue<template> <p>Child</p> </template>◆ 親コンポーネント
App.vue<template> <div> <!-- is:"別のコンポーネントを参照する"属性 --> <component v-bind:is="sample"></component> </div> </template> <script> import Child from "./components/Child.vue"; export default { data() { return { //sample:属性名 default:値 sample: "default" }; }, components: { //子コンポーネントを参照する Child }ライフサイクルフック
- activated:生き続けたコンポーネントを
活性化
する際に、参照される- deactivated:生き続けたコンポーネントを
非活性化
する際に、参照される- destroyed:
Vueインスタンスが破棄
された際に、参照される- keep-alive:コンポーネントの内容を
保持したい時
に使用する◆ destroyedメソッド
Destroy.vue<script> export default { destroyed() { //Vueインスタンスが破棄された際に、出力される console.log("Hello World!"); } } </script>◆ keep-alive
Keepalive.vue<template> <div> <keep-alive> <!-- 保持したい"コンポーネント"を"keep-alive"で囲む --> <component v-bind:is="sample"></component> </keep-alive> </div> </template>◆ activated / deactivatedメソッド
Sample.vue<script> export default { activated() { //コンポーネントが"活性化状態"の時に出力される console.log("Hello World!"); }, deactivated() { //コンポーネントが"非活性化状態"の時に出力される console.log("Good morning"); } }; </script>参考文献
- 投稿日:2020-06-21T19:27:18+09:00
ワイ「何でそんな小っさいコンポーネント作ってるん?w」
とあるWeb制作会社にて
ワイ「ハスケル子ちゃん」
ハスケル子「はい」
ワイ「今日ワイは何の仕事するんやったっけ?」
ハスケル子「確か今日からは」
ハスケル子「NuxtとVuetifyを使って管理画面を作る案件が始まるんじゃなかったでしたっけ?」ワイ「おお、せやった」
ハスケル子「もうFigmaのデザイン見ましたか?」
ワイ「ヒグマ?」
ワイ「ヒグマなんて、写真でしか見たことないけど」ハスケル子「Figmaです」
ハスケル子「ブラウザ上でも使えるデザインツールですよ」ワイ「ああ、そっちな」
ワイ「Higumaのほうね」ハスケル子「じゃあ、さっそくデザイン見ながら」
ハスケル子「コーディングしていきましょう」ワイ「おお、頑張っていこか!」
デザインを見てみる
ハスケル子「↑このキャンセルボタンとOKボタン」
ハスケル子「いろんなページで使うみたいなので」
ハスケル子「OkButton
とCancelButton
て感じで」
ハスケル子「それぞれコンポーネントとして作っておきましょうか」ワイ「ん?コンポーネント作る?」
ワイ「でも今回は、Vuetifyっていうコンポーネントフレームワークを導入してるから」
ワイ「Vuetifyのv-btn
っていうコンポーネントを使えばええんちゃう?」<v-btn> キャンセル </v-btn> <v-btn> OK </v-btn>ワイ「↑こんな感じや」
ワイ「あとはいくつかpropsを指定してやれば、デザイン通りの見た目になるで」ワイ「丸いボタンやから
rounded
」
ワイ「影はいらんからdepressed
」
ワイ「長さを揃えたいからmin-width="120"
」
ワイ「大きめにしたいからlarge
」
ワイ「他にも色々・・・」
ワイ「あとは、クリックイベントつけて・・・」<v-btn rounded depressed min-width="120" large outlined @click="cancel" > キャンセル </v-btn> <v-btn rounded depressed min-width="120" large color="primary" @click="ok" > OK </v-btn>ワイ「↑こんな感じや」
ハスケル子「でも、毎回こんなにprops書いてたら」
ハスケル子「面倒くさいじゃないですか」
ハスケル子「OkButton
とCancelButton
ていうコンポーネント作りましょうよ」ワイ「別に、コピペするだけやん」
ワイ「何でわざわざ、v-btn
を1つ入れるためだけのコンポーネントを作らなあかんねん」ハスケル子「そんなに言うなら、コンポーネント化しなくてもいいですけど・・・」
4時間後
ワイ「ふう、だいぶコーディングが進んだな」
ワイ「2人で100ページもできたで」ハスケル子「私が99ページで、やめ太郎さんは1ページですけどね」
ワイ「ま、まぁな」
社長「おーい」
社長「やめ太郎、ハスケル子ちゃん」ワイ「何でっか」
社長「ちょっとデザイン変わるらしいわ」
社長「丸っぽいボタンやなくて、四角いボタンに変わるみたいや」社長「↑こんな感じや」
ワイ「ファッ!?」
ワイ「もう100ページもコーディングしてしまいましたが!?」ハスケル子「(やめ太郎さんは1ページ・・・)」
ワイ「まあ、検索置換で
rounded
を消せばいいだけか・・・」
ワイ「rounded
というpropsを消せば、丸みがなくなるからな」
ワイ「よっしゃ、さっそく検索置換や!」
ワイ「・・・アッ!なんかエラー出た!」ハスケル子「なんか、消しちゃいけない
rounded
も消しちゃったみたいですね」ワイ「ぐぬぬ」
ワイ「割とありふれた単語やから、慎重に検索置換せんとな・・・」ハスケル子「その必要はないですよ」
ワイ「えっ・・・何で・・・」
実はコンポーネント作ってました
ハスケル子「実は、
OkButton
とCancelButton
ていうコンポーネント」
ハスケル子「私が作っておきました」
ハスケル子「私がコーディングした99ページでは、そのコンポーネントを使ってます」ワイ「そ、そうなんか」
<CancelButton @click="cancel" /> <OkButton @click="ok" />ハスケル子「↑こんな感じです」
ワイ「おお、スッキリやね」
ハスケル子「
OkButton
コンポーネントの中身は↓こんな感じです」/components/OkButton.vue<template> <v-btn rounded depressed min-width="120" large color="primary" @click="$emit('click')" > OK </v-btn> </template>ハスケル子「なので、↑このファイルの
rounded
を消して」
ハスケル子「CancelButton
コンポーネントからもrounded
を消す」
ハスケル子「その2ファイルをいじるだけで」
ハスケル子「99ページ全てのボタンが、丸から四角に変わります」ワイ「ぐぬぬ・・・!」
ハスケル子「ボタン1つだけでも、コンポーネント化しておいて良かったですね」
ワイ「いや、でもコンポーネント化すると」
ワイ「それを読み込むためのコードを全ページに書かんとあかんやん?」components: { CancelButton, OkButton },ワイ「↑こんな感じで」
ハスケル子「書かなくても大丈夫ですよ」
ハスケル子「ちょっとした設定をするだけです」ワイ「」
ハスケル子「小さいコンポーネントにだって価値があるんです」
ハスケル子「やめ太郎さんの小さい脳ミソにも価値があるように」ワイ「せやな」
ワイ「ありがとう、ハスケル子ちゃん・・・!」もっと小さいコンポーネントも作ってた
ハスケル子「実はこんなコンポーネントも作りました」
/components/Heading2.vue<template> <h2 class="heading2"> <slot /> </h2> </template>ワイ「こ、これは・・・」
ワイ「実質h2
タグだけやん」
ワイ「何でそんな小っさいコンポーネント作ってるん?w」ハスケル子「だって、この見出しも」
ハスケル子「ほとんど全ページで登場するパーツじゃないですか」ワイ「いや、でも・・・」
<h2 class="heading2">見出し</h2>ワイ「普通に↑こう書けばいいだけやん」
ワイ「もし、さっきのボタンみたいにデザイン変更が発生したとしても」
ワイ「CSSで調整すればええだけやで」
ワイ「さすがにこのコンポーネントは無意味やろ・・・w」ハスケル子「チッ」
社長「おーい」
社長「またデザイン変わったわ」
社長「見出しのデザインが、ちょっと凝った感じになったわ」
社長「でも、h2
タグの中にspan
タグでも入れれば実現可能やろ」ワイ「ファッ!?」
ワイ「全ページのh2
タグの中にspan
入れなアカンの!?」ハスケル子「だから必要ないですって」
/components/Heading2.vue<template> <h2 class="heading2"> <span> <slot /> </span> </h2> </template>ハスケル子「↑こうです」
ハスケル子「さっきのHeading2
コンポーネントの中にspan
タグを書くだけです」ワイ「おお・・・」
ワイ「小さなパーツでもコンポーネントにしておくと、修正するときにラクなんやな・・・」ハスケル子「はい」
ハスケル子「しかも、コンポーネント化することで」
ハスケル子「グローバルなCSSじゃなくscopedにできるじゃないですか」ワイ「あー、せやな」
ワイ「グローバルなCSSって、修正すると予想外のところに影響が出ちゃったりするもんな」ハスケル子「そうなんです」
ハスケル子「やめ太郎さんは無意味だとか言ってましたけど」
ハスケル子「この説明をする時間の方が、よっぽど無意味です」ワイ「あ、あんまりいじめんといてや・・・」
〜おしまい〜
まとめ
- かなり小さいパーツでもコンポーネント化しておくことで、修正コストを削減できた。
- コンポーネント化すると、CSSもグローバルじゃなくできるから(scoped)影響範囲がコントロールできて良いよね。
さらに
OkButton
とCancelButton
のpropsがほとんど共通なので、まずはBaseButton
というコンポーネントを作って、それを元に2つのコンポーネントを作っても良いかも。- ベースコンポーネント・基底コンポーネントってやつですね。
前にTwitterでアンケートしたときの結果
<h2 class="common-title">見出し</h2>
— 無職やめ太郎(本名) (@Yametaro1983) May 11, 2020
↑これくらいでもコンポーネントって作る派?
それとも、これくらいならクラス名つけてcommon.scssにスタイル書く派?私も以前は「小さいコンポーネントって要るの?」派でしたが、最近は小さくても作ってもいいかなって思ってます。
- 投稿日:2020-06-21T17:35:08+09:00
Vue.js3 β版をvue-cliから初めてみる
環境
- macOS Mojave
- Node.js 14.4.0
- yarn 1.22.4
yarnのインストール
$ npm uninstall yarn -g $ npm install yarn -gvue/cliのインストール
$ yarn global add @vue/clivue3プロジェクトの作成
$ vue create vue3-project ? Please pick a preset: no (node-sass, babel, typescript, router, eslint) yes (node-sass, babel, typescript, router, eslint) default (babel, eslint) ❯ Manually select features ? Check the features needed for your project: ◉ Babel ◉ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ❯◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing . . . . $ cd vue3-projectVue3プラグインの追加
$ vue add vue-nextsrc/router/index.tsを編集
src/router/index.ts// RouteConfigをRouteRecordRawに変更 import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'; import Home from '@/views/Home.vue' const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import('../views/About.vue') } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default routersrc/shims-tsx.d.tsを削除
src/shims-vue.d.tsを編集
src/shims-vue.d.tsdeclare module "*.vue" { import { defineComponent } from "vue"; const component: ReturnType<typeof defineComponent>; export default component; }src/components/HelloWorld.vueを編集
src/components/HelloWorld.vue<template> <div class="hello"> <p> For a guide and recipes on how to configure / customize this project, <br />check out the <a href="https://cli.vuejs.org" target="_blank" rel="noopener" >vue-cli documentation</a>. </p> <h3>Installed CLI Plugins</h3> <ul> <li> <a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener" >babel</a> </li> <li> <a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener" >typescript</a> </li> <li> <a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener" >router</a> </li> <li> <a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener" >eslint</a> </li> </ul> <h3>Essential Links</h3> <ul> <li> <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a> </li> <li> <a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a> </li> <li> <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a> </li> <li> <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a> </li> <li> <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a> </li> </ul> <h3>Ecosystem</h3> <ul> <li> <a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a> </li> <li> <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a> </li> <li> <a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener" >vue-devtools</a> </li> <li> <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a> </li> <li> <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a> </li> </ul> </div> </template> <script lang="ts"> import { defineComponent } from "vue"; export default defineComponent({}); </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="scss"> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>@types/estreeをインストール
$ yarn add @types/estreeyarn serveでVue3を起動する
$ yarn serveコンパイルエラーも警告も出ずに出れば完了
参考
- 投稿日:2020-06-21T15:41:03+09:00
Vue.js × Firestore まとめ
Vue.jsのFirebaseの初期化
まずは、src/firebase.jsというファイルを用意して、
Firebaseの初期化するコードを記述していきます。firebase.jsimport firebase from "firebase/app"; var firebaseConfig = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "" } firebase.initializeApp(firebaseConfig);Firestoreデータ取得
userというコレクションからデータを取得する想定。
get()メソッドで全件のデータを取得します。App.vue<template> <div id="app"> <ul> <li v-for="email in emails" v-bind:key="email">{{ email }}</li> </ul> </div> </template> <script> import firebase from "firebase/app"; import "firebase/firestore"; export default { data(){ return { emails: [] } }, created() { firebase.firestore().collection('user').get().then((querySnapshot) => { querySnapshot.forEach((doc) => { this.emails.push(doc.data().email) }) }) } }; </script>Firestoreデータ取得(ドキュメントID指定)
userというコレクションからデータを取得する想定。
doc()メソッドとget()メソッドで指定したドキュメントIDのデータを取得します。App.vue<template> <div id="app"> <p>{{ email }}</p> </div> </template> <script> import firebase from "firebase/app"; import "firebase/firestore"; export default { data(){ return { email: '' } }, created() { firebase.firestore().collection('user').doc('documentID').get().then((doc) => { this.email = doc.data().email }) } }; </script>Firestoreデータ追加
userというコレクションにデータを追加する想定。
add()メソッドでデータを追加します。App.vue<script> import firebase from "firebase/app"; import "firebase/firestore"; export default { methods: { addData: function () { firebase.firestore().collection('user').add({ email: "test@gmail.com", username: "test" }) } } }; </script>Firestoreデータ更新
userというコレクションのデータを更新する想定。
doc()メソッドとset()メソッドで指定したドキュメントIDのデータを更新します。App.vue<script> import firebase from "firebase/app"; import "firebase/firestore"; export default { methods: { updateData: function () { firebase.firestore().collection('user').doc("documentID").set({ email: "test.update@gmail.com", username: "test_update" }) } } }; </script>Firestoreデータ削除
userというコレクションのデータを削除する想定。
doc()メソッドとdelete()メソッドで指定したドキュメントIDのデータを削除します。App.vue<script> import firebase from "firebase/app"; import "firebase/firestore"; export default { methods: { delete: function () { firebase.firestore().collection('user').doc("documentID").delete().then(() => { alert('削除'); }) } } }; </script>まとめ
この記事が良いと思った方は、LGTMをしていただければ嬉しいです!
フォローも是非お願い致します(^^)
- 投稿日:2020-06-21T01:14:30+09:00
【Nuxt.js】firebase基礎編(Auth版):アカウント作成をできるようにしよう
前置き
firebase系の記事が増えてきました??
ログインの記事は公開しているので
今度はアカウント作成部分を作ります!
この部分だけなら
5分もかからないと思います…笑
firebase使えば本当にめちゃくちゃ簡単です?こちらは有料記事にて公開します??
・作成時にメールの送信
・エラー別の対処
ここでは純粋に
アカウント作成のみを記載してます!メールアドレスログインのコードに
付け加えるように書いていきます✍️
https://note.com/aliz/n/n7f4ae08ba828?他のログイン記事
Googleログイン
https://note.com/aliz/n/nbda9579d979a
twitterログイン
https://note.com/aliz/n/na2d2f41d4877
facebookログイン
https://note.com/aliz/n/n428bc927b86fコードの付け足し
アカウント作成については公式のココ?
firebase Guides
Create a password-based accountAuthenticate with Firebase using Password-Based Accounts using Javascript
この関数を使うようですね?
.createUserWithEmailAndPassword()【register.vue】
まずは登録フォームを作り
それを引数で渡せるようにしましょう!
これはlogin.vueをほぼコピペして少し変更してます。
・dispatchで呼び出すactionsをregisterに変更
・全体のdivのclass名loginをregisterに変更register.vue<template> <div class="register" > <h1 class="text" > アカウント登録 </h1> <form class="form" @submit.prevent > <label class="label"> <span class="label"> email </span> <input class="input" type="text" v-model="email" > </label> <label class="label"> <span class="label"> password </span> <input class="input" type="password" v-model="password" > </label> <button class="button" type="submit" @click="register" > Register </button> </form> <nuxt-link to="/login" class="link" > ログインはこちら </nuxt-link> </div> </template> <script> export default { computed: { user () { return this.$store.getters['user'] }, }, data () { return { email: '', password: '', } }, methods: { register () { this.$store.dispatch('register', {email: this.email, password: this.password}) } }, } </script>【store/index.js】
Vuexのactionsにregisterを追加します?store/index.jsimport firebase from '~/plugins/firebase' export const state = () => ({ user: { uid: '', email: '', login: false, }, }) export const getters = { user: state => { return state.user } } export const actions = { login({ dispatch }, payload) { firebase.auth().signInWithEmailAndPassword(payload.email, payload.password) .then(user => { console.log('成功!') dispatch('checkLogin') }).catch((error) => { alert(error) }) }, checkLogin ({ commit }) { firebase.auth().onAuthStateChanged(function (user) { if (user) { commit('getData', { uid: user.uid, email: user.email }) commit('switchLogin') } }) }, register ({ dispatch, commit }, payload) { firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password) .then(user => { console.log(user) dispatch('checkLogin') }).catch(function (error) { console.log({'code':error.code, 'message':error.message}) }) }, } export const mutations = { getData (state, payload) { state.user.uid = payload.uid state.user.email = payload.email }, switchLogin (state) { state.user.login = true }, }firebaseのAuthenticationで
アカウントが作成されているのが
分かります?簡単ですね?✨
ほぼコピペでいけちゃいますね?w
なんて楽なんでしょう…✨
- 投稿日:2020-06-21T00:46:15+09:00
vue.js firebase 環境構築 (os x)
vue.js firebase 環境構築についてのメモです。
環境確認
中途半端な環境になっているかもしれないので確認をする
ターミナルで 各コマンドの状況を確認するnode バージョン確認と削除
v10 以外の場合 firebase でエラーとなるので削除する必要がある
node -v v10.20.1brew でインストールした node の削除
brew uninstall --ignore-dependencies nodenodebrew でインストールしている場合の削除方法
nodebrew -v sudo npm uninstall npm -g周辺ファイルの削除
sudo rm -rf ~/.npm rm -rf ~/node_modules参考
Macのnodebrewで入れたnode, npmをクリーンアップnodebrew の インストール
nodeバージョンを選択してインストールできる nodebrew を導入する。
brew install nodebrew環境変数を追加
echo 'export PATH=$PATH:~/.nodebrew/current/bin/' >> ~/.bashrc source ~/.bash_profilenodebrew バージョン確認とセットアップ
nodebrew -v nodebrew setupv10系の node.js を nodebrew でインストールする
nodebrew ls-all nodebrew install v10.15.0 nodebrew use v10.15.0nodeバージョン確認
node -v v10.15.0firebase Cli をインストールする
Firebase CLI リファレンス を参考にインストールする
npm install -g firebase-toolsここまでの設定で 環境構築 は終わったはずなので、次はプロジェクトを作成してみましょう。
firebase コンソールでプロジェクトを登録する
firebase Cli で プロジェクトを初期化する
mkdir sample01 firebase login firebase init 作ったプロジェクトを指定して hosting を有効にするfirebase デプロイしてみる
firebase deployvue cli をインストールする
npm install -g @vue/clivue cli でプロジェクトを作る
cd [firebaseのプロジェクト ディレクトリ] vue create vue-appvue で作ったプロジェクトを実行してみる
cd vue-app npm run serveブラウザで http://localhost:8080/ をアクセスするとサンプルが表示されます。
vue で作ったプロジェクトをビルド
npm run build
./dist
ディレクトリが生成されるこのディレクトリを firebase hosting 先として指定するfirebase.json の修正
hosting のディレクトリを
public
からvue-app/dist
ディレクトリに修正する{ "hosting": { "public": "vue-app/dist", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] }, ...修正したらデプロイしてみる
firebase deploy