「Vue」の記事一覧

こんにちは〜BlumaのBuefyが気になっていますが、今回は作り込む時間がないのでとりあえずLaravel+Vuetifyでまたサービスを作って行く下準備をしていきます。 まずはLaravelを準備！ 環境 Homestead 10.9.1 Laravel 7.18Vuetify Material Dashboard Pro 2.1.0Mac OSX 10.13 High Sierranode 12.14PHP 7.4 Vuetify Material Dashboard Pro を入れていますが、最初に作った環境は無料版なので同じ方法でインストールしていこうと思います。 今回のプロジェクト名は「sampleproject」でいきますので適時読み替えてください。それではHomsetedにある、codeフォルダへプロジェクトを作成していきます。 LaravelをHomesteadへインストール [crayon-673ed9d667783078435702/] Vuetify Material Dashboardを入れる アナログですみませんwただコピペしてるだけです。 [crayon-673ed9d66778b189052474/] devDependenciesとdependenciesってこういう開発の時分ける必要あるのか謎ですが、開発だけで使いそうなパッケージは全部devに入れています。 Laravel 6用 package.json [crayon-673ed9d66778e360191121/] Laravel 7用 package.json [crayon-673ed9d667791874084408/] Nuxtをインストールした方がいいのかもしれない気がしてるので今度トライして見ます！ Sass周りを調整 sassフォルダもLaravelのままだと厄介なので調整していきます。 [crayon-673ed9d667793392324339/] app.scssを修正 ~/code/sampleproject/resources/sass/app.scssを修正します。 [crayon-673ed9d667795925327161/] js周りを修正 ルーターとストアは使いやすいようにディレクトリを作成します。 [crayon-673ed9d667797353364662/] app.jsを修正 ~/code/sampleproject/resources/js/app.jsを修正します。 [crayon-673ed9d667799886784787/] ~/code/sampleproject/resources/js/plugins/vuetify.jsの一部を修正します。 [crayon-673ed9d66779d099747943/] webpack.mix.jsを変更する [crayon-673ed9d66779f553292243/] ここでずっと引っかかっていました。variable.scssはVuetifyの上書きを行なっているのでどうしても後から読み込みをするとスタイルが壊れたりしてうまくUIが表示されなかったので。特に”$font-size-root”が反映されずに何度もプロジェクトごと作り直しました…。 [crayon-673ed9d6677a1194081739/] コンパイルが通ればオッケーです。次はLaravelのrouterを触ります。 Laravelの設定 ~/code/sampleproject/routes/web.php [crayon-673ed9d6677a3830215763/] ファイルを追加~/code/sampleproject/resources/views/index.blade.php [crayon-673ed9d6677a5340472709/] ※すみません、エスケープされちゃってます…。"<"を<へ置換してください…。 下記はWebpackに@をパスのエイリアスに設定していないために発生するエラー一覧です。ググった時に出て来やすくするために、あえて載せておきます。 ERROR in ./resources/js/plugins/base.jsModule not found: Error: Can't resolve '@/components/base' in '/Users/ユーザー名/code/プロジェクト名/resources/js/plugins'@ ./resources/js/plugins/base.js 5:23-75@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/plugins/vuetify.jsModule not found: Error: Can't resolve '@/i18n' in '/Users/ユーザー名/code/プロジェクト名/resources/js/plugins'@ ./resources/js/plugins/vuetify.js 3:0-26 19:13-17@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/i18n.jsModule not found: Error: Can't resolve '@/locales/ar.json' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/i18n.js 16:24-52@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/i18n.jsModule not found: Error: Can't resolve '@/locales/en.json' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/i18n.js 13:24-52@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/plugins/vuetify.jsModule not found: Error: Can't resolve '@/sass/overrides.sass' in '/Users/ユーザー名/code/プロジェクト名/resources/js/plugins'@ ./resources/js/plugins/vuetify.js 4:0-31@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/Calendar' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 179:15-51@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/Charts' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 173:15-49@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/Dashboard' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 47:15-52@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/Index' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 40:13-46@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/Widgets' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 167:15-50@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/component/Buttons' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 73:15-60@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/component/Grid' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 79:15-57@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/component/Icons' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 97:15-58@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/component/Notifications' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 91:15-66@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/component/Tabs' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 85:15-57@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/component/Typography' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 103:15-63@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/forms/ExtendedForms' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 116:15-62@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/forms/RegularForms' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 110:15-61@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/forms/ValidationForms' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 122:15-64@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/forms/Wizard' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 128:15-55@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/maps/FullScreenMap' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 160:15-61@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/maps/GoogleMaps' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 154:15-58@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/pages/Rtl' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 54:15-52@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/pages/Timeline' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 66:15-57@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/pages/UserProfile' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 60:15-60@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/tables/DataTables' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 147:15-60@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/tables/ExtendedTables' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 141:15-64@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/dashboard/tables/RegularTables' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 135:15-63@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/pages/Error' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 191:15-44@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/pages/Index' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 10:13-42 185:13-42@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/pages/Lock' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 16:15-43@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/pages/Login' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 22:15-44@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/pages/Pricing' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 28:15-46@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scssERROR in ./resources/js/router.jsModule not found: Error: Can't resolve '@/views/pages/Register' in '/Users/ユーザー名/code/プロジェクト名/resources/js'@ ./resources/js/router.js 34:15-47@ ./resources/js/app.js@ multi ./resources/js/app.js ./resources/sass/app.scss 長くてすみませんw全部で35個です。Vue Cliを今回は使わないので、@のエラーが頻発しています。 ん〜次からは少しくらい時短になるようにメモでした〜

「Vue」の記事一覧

Laravel6 + Vuetify Material Dashboard Proの設定方法

Laravel7+Vuetify Material DashboradをLaravel Mixで動かすまで(Laravel7対応)