完全honaki用悪しからず
php7.4
Laravel6.x
node.js20
PHP7.4の導入
homebrewのインストール
PHPの導入
Composerの導入
ターミナルで以下を実行
curl -sS https://getcomposer.org/installer | php
ターミナルで以下を実行でComposerインストール 確認
composer -v
以下画像の通りならOK
NPMの導入(mac)
Node.jsのインストール
https://nodejs.org/en/download
上記URLで「node-v20.11.1.pkg」ダウンロード
ダウンロード後インストーラーが起動
進めていきインストール
インストール確認
node -v
npm -v
環境構築
https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89
僕はバージョン指定した
composer create-project "laravel/laravel=6.x" Laravel_Vue --prefer-dist
Laravelプロジェクト作成
laravel/uiインストール
laravel/ui vueインストール
フロントエンドパッケージインストール
npm install
ターミナルで上記を実行するとエラー出る
だからnpm installの後に以下をターミナルで実行する
npm audit fix --force
Vue Routerインストール
https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#vue-router%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB
ターミナルで以下を実行するとエラーになる
npm install --save vue-router
↓
エラーの後に以下を実行
npm install -S vue-router@3
参考
https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#comment-95dfd7de728884095aae
フロントエンドビルド実行
https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%93%E3%83%AB%E3%83%89%E5%AE%9F%E8%A1%8C
ターミナルで以下を実行するとエラーになる
npm run dev
↓
エラーの後にここを追記
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js').vue() // ⭐️ 追記
.sass('resources/sass/app.scss', 'public/css');
参考：https://zakkuri.life/laravel-mix-npm-upgrade/
参考2：https://qiita.com/motti_engineer/items/e412103a7f6998fddc6c
Docker / コンテナ内にて
上記エラー解消後
再度ターミナルで以下を実行するとエラーになる
npm run dev
↓
エラーの後に
①「./node_modules/vue-loader」を削除
②ターミナルで以下を実行
npm i vue-loader@15.10.0
③以下の警告は無視
↓
理由は、ここで以下を実行すると
npm audit fix --force
「./node_modules/vue-loader/node_modules/package.json」の
"version": "15.10.0"から17あたりまでupdateされてしまうから
④再度ターミナルで以下を実行
npm run dev
↓
いつもの成功画面が出てくる
参考：https://github.com/vuejs/vue-loader/issues/1972
参考2：https://github.com/laravel-mix/laravel-mix/issues/3303
参考3：https://github.com/vuejs/vue-loader/issues/1859
参考4：https://qiita.com/KKKKKTTTTT/questions/3ad8537738edbfc04ae5
→最初の回答箇所（その後は読まなくてよし）
ここからはこれ
https://qiita.com/minato-naka/items/9241d9c7a7433985056d
ベースbladeとベースルーティングを追加
https://qiita.com/minato-naka/items/9241d9c7a7433985056d#%E3%83%99%E3%83%BC%E3%82%B9blade%E3%81%A8%E3%83%99%E3%83%BC%E3%82%B9%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%92%E8%BF%BD%E5%8A%A0
上記のみだとExampleComponentは表示されなかった
以下を追記することでできた
import Vue from 'vue'; // ⭐️ 追記
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});
→初心者すぎてここ10時間かかった。鬱になりかけた。
ヘッダーコンポーネント実装
タスク一覧コンポーネント実装
タスク詳細コンポーネント実装
タスク登録コンポーネント実装
タスク編集コンポーネント実装
ここからはこれ
https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5
SQLiteのセットアップ
migration作成
モデル作成
seeder作成
テーブル、テストデータ生成
タスク一覧取得API実装
タスク詳細取得API実装
タスク登録API実装
タスク更新API実装
タスク削除API実装
axios
Ajax/APIの関係がわかりやすい図
タスク一覧取得API繋ぎ込み
画面に一覧表示できない場合は
sqliteではなくmysqlに接続しに行っている可能性がある。
.envが保存されていないから反映されていないかも。
①.envを保存
②ターミナルでnpm run devを再度
npm run dev
③ターミナルでphp artisan serveを再度
php artisan serve
参考：https://terakoya.sejuku.net/question/detail/11552
mountedについて
mountedがどのタイミングかというと、DOMが読み込まれた直後のタイミングを意味する。
例↓
mounted() {
// イベントが発火するたびに
window.addEventListener("イベント名", 関数名)
// DOMが呼び込まれたときに一回だけ
this.関数名()
},
参考：https://pg-log.com/vue-mounted/
タスク詳細取得API繋ぎ込み
タスク登録API繋ぎ込み
タスク更新API繋ぎ込み
<script>
export default {
props: {
taskId: String
},
+ data: function () {
+ return {
+ task: {}
+ }
+ },
+ methods: {
+ getTask() {
+ axios.get('/api/tasks/' + this.taskId)
+ .then((res) => {
+ this.task = res.data;
+ });
+ },
+ submit() {
+ axios.put('/api/tasks/' + this.taskId, this.task) //⭐️ ここについて
+ .then((res) => {
+ this.$router.push({name: 'task.list'})
+ });
+ }
+ },
+ mounted() {
+ this.getTask();
+ }
}
</script>
put関数
axios.put(url, data, config)
→第二引数は「PUT送信するデータ」
参考：https://rakuraku-engineer.com/posts/axios/#PUT
参考2：https://qiita.com/reflet/items/d5658d5d69e8e1ccd489#put-%E6%9B%B4%E6%96%B0