2020年10月28日 星期三

laravel 6 Mix前端指南

環境

框架: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







沒有留言:

張貼留言