ShowProgramCode

2019年5月5日 星期日

laravel+bootstrap(composer install & npm install)

進入laravel之後,開始製作自己的頁面才發現Bootstrap Css沒有正確顯示,查了一下資料,雖然不是完全理解,不過我想大概是因為我沒有執行composer install和npm install,laravel需要外掛的一些元件沒有掛上去。

那麼開始執行程式吧!首先我沒有修改任何檔案,下面是cmd執行composer install的結果:

C:\AppServ\www\project\calibreBook
λ composer install
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Nothing to install or update
Package phpunit/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested.
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover
Discovered Package: fideloper/proxy
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Package manifest generated successfully.

到底安裝了什麼,其實我也搞不清楚,不過看到了php Unit,應該是和單元測試相關吧!其他東西就先不管了。

接著要執行npm install,這個時候cmd報錯了,npm不是內部或外部命令(我汗)。

查了一下,原來要執行npm前,還要先下Node.js,Node.js還有兩種版本LTS vs Current(狂汗),結論是LTS是長期維護版本,非前端專門的工程師,用這個就十分足夠了,Current裡面則會有新功能,專門的前端工程師可能會需要。

npm install執行時間非常長...(我汗),下面是執行完畢的結果(真的很長@@)
C:\AppServ\www\project\calibreBook
λ npm install
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

> node-sass@4.12.0 install C:\AppServ\www\project\calibreBook\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.12.0/win32-x64-64_binding.node
Download complete  ] - :
Binary saved to C:\AppServ\www\project\calibreBook\node_modules\node-sass\vendor\win32-x64-64\binding.node
Caching binary to C:\Users\Amy\AppData\Roaming\npm-cache\node-sass\4.12.0\win32-x64-64_binding.node

> uglifyjs-webpack-plugin@0.4.6 postinstall C:\AppServ\www\project\calibreBook\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js


> node-sass@4.12.0 postinstall C:\AppServ\www\project\calibreBook\node_modules\node-sass
> node scripts/build.js

Binary found at C:\AppServ\www\project\calibreBook\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine

> gifsicle@3.0.4 postinstall C:\AppServ\www\project\calibreBook\node_modules\gifsicle
> node lib/install.js

  √ gifsicle pre-build test passed successfully

> mozjpeg@5.0.0 postinstall C:\AppServ\www\project\calibreBook\node_modules\mozjpeg
> node lib/install.js

  √ mozjpeg pre-build test passed successfully

> optipng-bin@3.1.4 postinstall C:\AppServ\www\project\calibreBook\node_modules\optipng-bin
> node lib/install.js

  √ optipng pre-build test passed successfully

> pngquant-bin@4.0.0 postinstall C:\AppServ\www\project\calibreBook\node_modules\pngquant-bin
> node lib/install.js

  √ pngquant pre-build test passed successfully
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.8 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.8: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1598 packages from 753 contributors and audited 21494 packages in 93.949s
found 34 vulnerabilities (18 low, 11 moderate, 5 high)
  run `npm audit fix` to fix them, or `npm audit` for details

那麼bootstrap到底掛上了沒呢?我看到了bootstrap-sass和jquery,後面還要再試試看才知道。

<link rel="stylesheet" href="/css/app.css">

我開了測試檔案,把上方的這個掛上去就可以看到bootstrap的style了,這個應該是公用的css。

<script src="/js/app.js"></script>

上方的這個應該是公用的js,目前應該包括bootstrap和jquery的js。

到此bootstrap和jquery應該已經掛上了。