Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vuetifyの設定と、axiosを使った通信部分、CORS設定を書いてみる #11

Merged
merged 32 commits into from
Oct 16, 2023
Merged

Vuetifyの設定と、axiosを使った通信部分、CORS設定を書いてみる #11

merged 32 commits into from
Oct 16, 2023

Conversation

Tatsumi0000
Copy link
Owner

@Tatsumi0000 Tatsumi0000 commented Oct 7, 2023 •
edited
Loading

🥅 このプルリクのゴール / Resolved Issues

  • vuetifyの設定
  • axiosを使った通信処理の設定
  • rack-corsにCORSの設定を追加

👏 解決する issue / Resolved Issues

⛏ 変更内容 / Details of Changes

  • SCSSを使えるようにする
  • Vuetifyを使えるようにする
    • Viteで使いたいのでプラグインも入れた
  • axiosを入れた
    • クエリパラメータをオブジェクトからクエリパラメータに変換するqsも入れた
    • Repositoryで通信処理をしてUsecaseでデータを取ってくるみたいにしてみた
  • API側にRackの設定でCORSを入れた

📸 スクリーンショット / Screenshots

❗️ 気になる点 / Concern points

@Tatsumi0000
axios,qs,vuetify関連,sassのライブラリを入れた
6560220 
- axiosは通信処理
- qsはオブジェクトをクエリパラメータに変換したりするため。types/qsはTypeScriptで扱いやすくするため
- vuetifyはデザインのためでviteで使いたいのでそれのライブラリも入れた
- sassはSCSSで書きたいので
@Tatsumi0000
vuetifyの設定を書いた
724c856 
- https://vuetifyjs.com/en/getting-started/installation/#existing-projects
- https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
@Tatsumi0000
開発中はローカルのAPIにつなぎます
dd9bcdf 
.gitignoreに本番環境のenvは入れないように除外しとく
@Tatsumi0000
AxiosInstance の設定を書いた
fb0cfdf 
基本的なことだけ
@Tatsumi0000
Modelを書いた
e3f2496 
リクエストするときとレスポンスを扱うときは型で扱ったほうが使いやすいので
@Tatsumi0000
実際に通信するRepositoryを書いてみた
53bfb61 
が、エラー処理などは適当なので後で修正が必要
@Tatsumi0000
データを引っ張ってくるUsecaseを作った
2770b06
@Tatsumi0000 Tatsumi0000 added the Vue(TypeScript/JavaScript) Vueでの開発 label Oct 7, 2023
@Tatsumi0000 Tatsumi0000 self-assigned this Oct 7, 2023
@Tatsumi0000
Copy link
Owner Author

@dependabot rebase

@Tatsumi0000
Copy link
Owner Author

だめだった

@Tatsumi0000 Tatsumi0000 added the Ruby(Rails) Ruby言語の開発 label Oct 8, 2023
@Tatsumi0000 Tatsumi0000 changed the title Vuetifyの設定と、axiosを使った通信部分を書いてみる Vuetifyの設定と、axiosを使った通信部分、CORS設定を書いてみる Oct 8, 2023
@Tatsumi0000
自動整形とlinterを動かせるようにした
c4bf185 
そして整形した。
- npm run format
- npm run lint

で整形とリンターが動く
@Tatsumi0000
vscodeはつかわないのでいらないです
f0edc71
@Tatsumi0000
整形した
de5c82e
@Tatsumi0000
VueのファイルをTSとして良い感じに認識するようにしたりなどのeslint周りの設定
14d4e2b
@Tatsumi0000
Vuetify専用の設定ファイルだよと伝わるようにコメント
d997323
@Tatsumi0000
Vuetifyの設定を書いたのでそのファイルから設定を読み取ってプロジェクト全体で使えるようにした
94b5494 
一緒にこのファイルに書いてもいいけど分割したほうが見やすそうなので分けた。
@Tatsumi0000
試しにVuetifyのコンポーネントを呼び出しました。
ac17d4a
@Tatsumi0000
vuetifyとvue-routerを入れた
02b3c77
@Tatsumi0000
画面遷移のがめのrouterを設定
94e2069
@Tatsumi0000
vue-routerとvuetifyの設定をした
b415d03
Tatsumi0000
Tatsumi0000 commented Oct 16, 2023
View reviewed changes
Copy link
Owner Author

@Tatsumi0000 Tatsumi0000 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🆗

@Tatsumi0000 Tatsumi0000 marked this pull request as ready for review October 16, 2023 11:42
@Tatsumi0000 Tatsumi0000 merged commit dedc365 into main Oct 16, 2023
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@Tatsumi0000 Tatsumi0000

Labels
Ruby(Rails) Ruby言語の開発 Vue(TypeScript/JavaScript) Vueでの開発
Projects
StarryKids project
Status: ✅ Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

APIを叩いてVueで表示する
1 participant
@Tatsumi0000