環境
框架：laravel 6.6
安裝 laravel/ui
$ composer require laravel/ui:^1.0 --dev
如果報錯：
In PackageManifest.php line 122:
Undefined index: name
Script @php artisan package:discover --ansi handling the post-autoload-dump event returned with error code 1
Installation failed, reverting ./composer.json and ./composer.lock to their original content.
原因：composer 2.0的問題，把composer 版本回退之前版本
# composer self-update
Updating to version 2.0.2 (stable channel).
Downloading (100%)
Use composer self-update --rollback to return to version 1.8.4
# composer self-update --rollback
Rolling back to version 2019-02-11_10-52-10-1.8.4.
ps. laravel 6必須安裝 laravel/ui:^1.0 --dev 的版本
生成vue基本腳手架
$ php artisan ui vue
Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
這個操作新增了：
resources/js/components/ExampleComponent.vue
resources/sass/_variables.scss
resources/sass/app.scss
修改了：
package.json
resources/js/app.js
resources/js/bootstrap.js
註冊vue和vue組件
+++ b/resources/js/app.js
+window.Vue = require('vue');
...
+Vue.component('example-component', require('./components/ExampleComponent.vue').default);
...
+const app = new Vue({
+ el: '#app',
+});
$ npm install
$ npm run dev
...
ERROR Failed to compile with 2 errors
error in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'outputStyle'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (/var/www/html/project-z/coolapp/node_modules/schema-utils/dist/validate.js:98:11)
at Object.loader (/var/www/html/project-z/coolapp/node_modules/sass-loader/dist/index.js:36:28)
at /var/www/html/project-z/coolapp/node_modules/webpack/lib/NormalModule.js:316:20
at /var/www/html/project-z/coolapp/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /var/www/html/project-z/coolapp/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at runSyncOrAsync (/var/www/html/project-z/coolapp/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
at iterateNormalLoaders (/var/www/html/project-z/coolapp/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at /var/www/html/project-z/coolapp/node_modules/loader-runner/lib/LoaderRunner.js:205:4
at /var/www/html/project-z/coolapp/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
at processTicksAndRejections (internal/process/task_queues.js:79:11)
error in ./resources/sass/app.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'outputStyle'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (/var/www/html/project-z/coolapp/node_modules/schema-utils/dist/validate.js:98:11)
at Object.loader (/var/www/html/project-z/coolapp/node_modules/sass-loader/dist/index.js:36:28)
@ ./resources/sass/app.scss 2:14-253
原因：
php artisan ui vue 改了 package.json ，使用了 "sass-loader": "^8.0.0", ，使得下一個操作 npm install 安裝了sass-loader 8.0.0
解法：
移除sass-loader 8.0.0 改裝7.1.0
$ npm uninstall --save-dev sass-loader
$ npm install --save-dev sass-loader@7.1.0
再執行
$ npm run dev
生成 登錄/註冊 腳手架
$ php artisan ui vue --auth
這個操作新增了：
app/Http/Controllers/HomeController.php
resources/views/auth/login.blade.php
resources/views/auth/passwords/confirm.blade.php
resources/views/auth/passwords/email.blade.php
resources/views/auth/passwords/reset.blade.php
resources/views/auth/register.blade.php
resources/views/auth/verify.blade.php
resources/views/home.blade.php
resources/views/layouts/app.blade.php
修改了：
routes/web.php
登錄頁
http://app.test:5566/login 使用users 表的 email 和password 登錄（passport API也是這個方式登錄的）
歡迎頁
http://app.test:5566/ resources/views/welcome.blade.php:68 上方新增了Login和Register按鈕
編寫Vue 組件
diff --git a/resources/js/components/ExampleComponent.vue b/resources/js/components/ExampleComponent.vue
index 3fb9f9aa..944c6973 100644
--- a/resources/js/components/ExampleComponent.vue
+++ b/resources/js/components/ExampleComponent.vue
@@ -3,7 +3,7 @@
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
- <div class="card-header">Example Component</div>
+ <div class="card-header">Example Component Bear</div>
<div class="card-body">
I'm an example component.
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 05dfca92..73075388 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -1,6 +1,7 @@
@extends('layouts.app')
@section('content')
+<example-component></example-component>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
監視和自動重編譯發生變化的組件
在hyper-v 上執行，不要在windows 10 上執行，PHPStorm Deployment 要忽略 node_modules 目錄上傳
$ npm run watch-poll
新增組件後，需要重新編譯 npm run dev ， 或重新執行 npm run watch-poll
參考資料
https://stackoverflow.com/a/61197256 Laravel PackageManifest.php: Undefined index: name
https://stackoverflow.com/a/60513876 Sass Loader Error: Invalid options object that does not match the API schema
https://github.com/JeffreyWay/laravel-mix/issues/2206#issuecomment-527730992 Compatibility with sass-loader 8.0.0
沒有留言:
張貼留言