search

kiko0701 / dl-frontend-spa

「笑い死に」のフロントエンド（SPA）リポジトリ
0 stars 0 forks source link

ハッカソンで作ったひな形のリファクタリング #1

Open kiko0701 opened 5 years ago

kiko0701 commented 5 years ago

Angular7系からVue.jsに乗せ換える

CSSフレームワーク：Vuetify ⇒Vue.js専用。マテリアルデザインベースのフレームワーク。とりあえずこれベースでいってみよ

kiko0701 commented 5 years ago

1/30：Vue CLI 3で ハロワ＆CSSフレームワーク（Vuetify）追加

●Vue CLI 3で vue create waraishini （とりあえずVuexとかRouter込みこみ・・・） ●GitHubリポジトリに初プッシュ ●CSSフレームワーク（Vuetify）を依存関係に追加

kiko0701 commented 5 years ago

1/31：TypeScriptクラスコンポーネントで作っていくことを決めた＆vueファイルを .vue, .ts, .scss に分割して開発していくと決めた

決めたこと ●AngularのTypeScriptを用いたクラスコンポーネントの形が一番しっくりきたので、 Vue CLI 3でTypeScriptのプロジェクトで進めてみる！ （元々そうだったけど）

参考： https://jp.vuejs.org/v2/guide/typescript.html https://github.com/Microsoft/TypeScript-Vue-Starter （マイクロソフトが作ったTypeScriptベースのExample、ちとふるいか）

●困ってること ~ただ、単一ファイルコンポーネントではなくできればhtml,ts,scssで分けたいけど読み込みうまくいかない・・・~ 解決しました。

●対策 とりあえず単一ファイルコンポーネントで動かすことにした。

今のとこ謎なのは、作ったコンポーネント（.vue）を export class HogeComponent って書いてApp.vueで読み込もうとすると Uncaught TypeError: Cannot set property 'render' of undefined エラーになること。 とりあえず、作ったクラスコンポーネントとかは必ず export default HogeComponent で定義することで連携できた。

ここまで出来たらファイルの切り分けもうまくいった

kiko0701 commented 5 years ago

2/1：お題一覧ページひな形作成

●Vuetifyのベータ版（1.5.0）で日本語localeに対応するらしい →しかも2.0.0からstylからscssになる。熱い リリースノート：https://github.com/vuetifyjs/vuetify/releases

kiko0701 commented 5 years ago

2/3： http://localhost:8080/#/ 問題解決（シャープが消したい）

●vue-routerがデフォルトで mode: 'hash' らしく、それが原因でURLが http:localhost:8080/#/ になっていた。 ●対策 mode: history を指定し、ページのリロード無しに URL 遷移を実現する history.pushState API を利用する ただ、このままだと直接URLを入力した際にデフォルトのルートパスにしか飛ばない （今のままだと笑わすページにしか飛ばない）