iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 8
3
Modern Web

Laravel從入門到放棄…………原生PHP (疑?系列 第 7

[Day 07] 安裝Laravel、建立Laravel網站、並成功編譯

昨天檢查完環境之後,
今天要開始來實際架一個Laravel的網站了,

安裝Laravel

  • 首先要打開 命令提示字元,最快的方式就是 Win鍵 + F5 -> cmd
    https://ithelp.ithome.com.tw/upload/images/20190918/2010569402gMno90uQ.png
  • composer global require "laravel/installer"
    https://ithelp.ithome.com.tw/upload/images/20190918/20105694asGV4iST0P.png

建立Laravel專案

  • 切換到網站的目錄
    https://ithelp.ithome.com.tw/upload/images/20190918/20105694dXcghyUSeF.png
  • 建立專案
    composer create-project --prefer-dist laravel/laravel LaravelIronMan
    其中LaravelIronMan是專案名稱
    在這裡有一點要注意,執行這個命令必須要求資料夾底下是空的,如果昨天有創建index.php檔案,必須先將檔案移除才行
    https://ithelp.ithome.com.tw/upload/images/20190918/20105694D4OApIXjtR.png
  • 啟動專案
    cd LaravelIronMan
    php artisan serve
    https://ithelp.ithome.com.tw/upload/images/20190918/20105694vntqv7rl83.png
  • 輸入網址: http://localhost:8000
    成功架設網站
    https://ithelp.ithome.com.tw/upload/images/20190918/20105694uh4CjcQ8UZ.png

這邊要做一點修正,之前我們IIS網站是架在E:\Web\LaravelIronMan目錄,現在要改成E:\Web\LaravelIronMan\public目錄,因為Laravel執行是在public目錄底下

其實Laravel就算不編譯也可以執行,
只有js跟scss需要透過編譯來轉換,
不過其實也可以直接放在public資料夾底下,
但是我們還是希望能夠按照正常流程來跑,

或許是Laravel在Windows下執行問題特別多,
總之還有很多雜事需要處理.

於是我們輸入了 npm run dev,
結果出現了以下的錯誤訊息.
‘cross-env’ 不是內部或外部命令,可執行的程式或批次檔
https://ithelp.ithome.com.tw/upload/images/20190918/20105694o5Bb4PjDKj.png

Google 一下找到 這一篇

他說要安裝cross-env:
npm install cross-env --save-dev
https://ithelp.ithome.com.tw/upload/images/20190918/20105694sIpeBmy2PV.png

再執行一次npm run dev
發現錯誤訊息換了
https://ithelp.ithome.com.tw/upload/images/20190918/20105694isOnCiKZhH.png

Google一下又找到 這一篇那一篇

於是作了以下動作
npm remove webpack -g
https://ithelp.ithome.com.tw/upload/images/20190918/20105694FGzI75gBFY.png

npm i webpack --save-dev
https://ithelp.ithome.com.tw/upload/images/20190918/20105694mD7pq0syoN.png

接著再嘗試 npm run dev
又有了新的錯誤訊息
他說要安裝webpack-cli
https://ithelp.ithome.com.tw/upload/images/20190918/20105694PxpGWhDvA5.png

然後又跑出新的錯誤訊息了
https://ithelp.ithome.com.tw/upload/images/20190918/20105694NRGDCZIbdQ.png

然後去找了 這一篇

找到專案底下的package.json加上以下這段

"devDependencies": {
  "laravel-mix": "^2.1.11"
},

然後使用 npm install 安裝套件,執行完之後看到這個畫面
https://ithelp.ithome.com.tw/upload/images/20190918/20105694b3he355yrK.png

再執行 npm run dev,已經編譯到78%了,有進步
然後又出現了新的錯誤訊息
https://ithelp.ithome.com.tw/upload/images/20190918/20105694dYAeYZFEeu.png

我又去找了 另一篇另外一篇

嘗試照上面的方法執行npm install extract-text-webpack-plugin@next
https://ithelp.ithome.com.tw/upload/images/20190918/20105694lMH4dBMP5O.png

但是並沒有效果,
照上面的安裝了mini-css-extract-plugin並新增webpack.config.js也是沒有用,
最後靈機一動,
因為編輯器有提示laravel-mix版本太舊,
抱著死馬當活馬醫的心態,
把larave-mix的版本改成 ^4.1.4 再重新npm install --save-dev
https://ithelp.ithome.com.tw/upload/images/20190918/20105694v6LXsR7Pte.png

然後執行npm run dev
https://ithelp.ithome.com.tw/upload/images/20190918/20105694BLGjgf31ot.png
終於能夠成功編譯了, 可喜可賀!
可以安心睡覺了!

p.s.
明天就要開始正式進入Laravel的世界了,
之後我會使用 Visual Studio Code(簡稱VS Code)來當作編輯器,
如果沒有自己習慣的編輯器,
可以考慮安裝VS Code來當作編輯器,
不過目前只是把它當作文字編輯器而已,
安裝了很多套件還沒有找到適合的套件來協助編輯PHP.


上一篇
[Day 06] 檢查並建置Laravel的環境
下一篇
[Day 08] Laravel的目錄結構
系列文
Laravel從入門到放棄…………原生PHP (疑?47
0
阿展展展
iT邦好手 1 級 ‧ 2019-10-23 21:00:40

然後又出現了新的錯誤訊息
然後又出現了新的錯誤訊息
然後又出現了新的錯誤訊息
然後又出現了新的錯誤訊息
/images/emoticon/emoticon06.gif

小魚 iT邦大師 1 級‧ 2019-10-23 21:06:22 檢舉

是啊,
工程師就是要不斷解決錯誤訊息,
最後就會跑出成果了.
/images/emoticon/emoticon11.gif

0
阿展展展
iT邦好手 1 級 ‧ 2019-11-25 08:44:41

重看一次發現
魚大是粉紅系的耶/images/emoticon/emoticon25.gif

小魚 iT邦大師 1 級‧ 2019-11-25 10:15:47 檢舉

啥?
你說視窗嗎?
Win 8 都是這樣的.

0
ckp6250
iT邦新手 2 級 ‧ 2019-12-11 16:44:58

  架好了,Laravel 的畫面也冒出來啦,鬆了一口氣。

  不過,有個小地方記錄一下,我是把 Laravel 安裝在 vBox 底下,
  若執行,

php artisan serve

  由上層主機上執行 192.168.0.x:8000 , 是連不到的,要改成

php artisan serve --host 0.0.0.0 --port 8000

才能連入。

  另,請教大師,有一點,我還沒弄明白,我不是有啟動 apache 了嗎,為何還需要 php artisan serve?它的作用是什麼?它是開發階段暫時啟動?或者永遠都要開著?

  假如我同一時間,有好幾個專案在開發中,那麼不就要 8000 ,8001 , 8002 ....開啟很多個 port?

小魚 iT邦大師 1 級‧ 2019-12-11 17:23:40 檢舉

我是把 Laravel 安裝在 vBox 底下

這屬於網路架構的問題,
我的專長比較偏向軟體.

我不是有啟動 apache 了嗎,為何還需要 php artisan serve

因為你沒有架站啊,
如果你在apache裡面已經設定好,
就可以直接透過apache的設定看網頁,
php artisan serve是讓你可以在還沒架好環境之前就先看一下自己寫的東西, 方便做測試, 如果正式環境基本上不會這樣用.

php artisan serve
是給沒web server臨時測試用的指令。
有架server的話。就不需要用他了。

我要留言

立即登入留言