Laravel 5.5 LTSとBootstrap 4でTodoアプリ作ってみた。
Github https://github.com/Lara-Bell/todo
MIT License
お好きにどうぞ。
*Demo
Go Appからどうぞ。
遊んでみてください(*´∀｀*)
経緯
TodoアプリはCRUDを学べるいい課題だと思う。
開発が容易。(作業時間は5時間ほど。デプロイのほうが時間かかりました。。)
Qiitaやhatena、その他Blogの先輩方から素晴らしい記事などを見て触発された。
自分用の備忘録。
仕様
開発環境
macOS High Sierra 10.13
Docker for mac Version 17.09.0-ce-mac35
Laradock PHP7.1 MySQL5.7 Nginx
アプリ作成の流れ
Laravel インストール
|
1 |
composer create-project --prefer-dist laravel/laravel todo |
.env 編集 ※ここは開発環境にあわせてください。
|
1 2 3 4 5 6 7 |
# 各自で設定 DB_CONNECTION=mysql DB_HOST=mysql DB_PORT=3306 DB_DATABASE=laradock DB_USERNAME=laradock DB_PASSWORD=secret |
webpack.mix.jsを一部変更
|
1 2 3 4 5 6 7 8 |
mix.autoload({ jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"], 'popper.js/dist/umd/popper.js': ['Popper'] }).js( 'resources/assets/js/app.js', 'public/js' ).sass( 'resources/assets/sass/app.scss', 'public/css' ); |
package.json 編集 Bootstarap v3->v4に変更
|
1 2 3 4 5 6 7 8 9 10 |
"devDependencies": { "axios": "^0.16.2", "bootstrap": "^4.0.0-beta.2", "cross-env": "^5.0.1", "jquery": "^3.1.1", "laravel-mix": "^1.0", "lodash": "^4.17.4", "popper.js": "^1.12.5", "vue": "^2.1.10" } |
NPMでインストール
|
1 |
npm install |
resources/assets/js/bootstrap.js 編集
|
1 2 3 4 5 6 7 8 |
import Popper from 'popper.js/dist/umd/popper.js'; // 追加 try { window.$ = window.jQuery = require('jquery'); window.Popper = Popper; // 追加 require('bootstrap'); // 編集 } catch (e) { } |
resources/assets/sass/_variables.scss
|
1 2 |
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; //削除 $font-size-base: 1rem; //編集 |
JavaScriptとCSSを一つのファイルになるようにコンパイル？
|
1 |
npm run dev |
config/app.php 編集
|
1 2 |
'timezone' => 'Asia/Tokyo', 'locale' => 'ja', |
下準備でかなりの分量になったためMVCあたりは次の記事にしたいと思います。
わかりにくいところや、質問などあればコメントにどうぞ。
続き
コメントを残す