XOOPS輕鬆架 - 線上書籍

:::

Laravel 5.8 入門講義 
=================

1. 由於接下來我們可能會用到一些javascript或CSS等前端資源，因此，我們可以使用 Laravel Mix 來管理前端資源。
2. Laravel Mix 一款前端任務自動化管理工具，讓你能夠為你的 Laravel 應用定義 Webpack 編譯任務， 支持許多常見的 CSS 與 JavaScript 預處理器，可以輕鬆地管理前端資源。
3. 在開始使用 Mix 之前，必須先確保你的機器上安裝了 Node.js 和 NPM。 
    ```bash
    node -v
    npm -v
    ```
    
    安裝 Laravel Mix 及相關依賴
    
     
    ```bash
    npm install
    ```
4. 接著順便安裝Yarn套件管理器（比npm更快的JavaScript 套件版本管理工具），請從這裡下載安裝：<https://yarnpkg.com/zh-Hant/docs/install#windows-stable>
5. 接著，就可以使用 Yarn 來安裝依賴： 
    ```bash
    yarn install --no-bin-links
    ```
    
     -no-bin-links只有在windows下才需要，就是在 npm install 時不要建立軟連結，避免在 ntfs 上運行 npm install 時會遇到的建立軟連結失敗的情況。
6. 然後我們還需要修改一下 Mix 的設定檔`webpack.mix.js`：`<span class="token punctuation"></span>` 
    ```javascript
    mix.js('resources/js/app.js', 'public/js')
        .sass('resources/sass/app.scss', 'public/css')
        .version();
    ```
    
     在最後加了一個 `version()`，使 Mix 每次生成的靜態文件後面加上一個類似版本號的參數，避免被瀏覽器快取，而老是讀到錯誤的舊檔案。
7. 最後，執行以下命令即可： 
    ```bash
    npm run watch-poll
    ```
    
    `watch-poll` 會在終端裡一直運行，監控 `resources` 檔案夾下的資源檔案是否有發生改變。在 `watch-poll` 命令運行的情況下，一旦資源檔案發生變化，Webpack 會自動重新編譯。
8. 如果都出現錯誤訊息，請先刪除 node\_modules 目錄，然後按以下方式解決：
    
     
    ```bash
    npm cache clean --force 
    npm install 
    npm run dev 
    ```
9. 注意：在開發過程中，我們需要保證 `npm run watch-poll` 一直處在執行狀態中，如果不想佔用VSCode的終端機，可以用PowerShell來執行之。正常運行的畫面看起來像這樣：  
     ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/43/pic101.png)
 
<div class="fluidbox__wrap" style="z-index: 990;"> 
 
[![到GitHub觀看此單元程式異動](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/34/to_github.png)](https://github.com/tad0616/myshop/commit/b911d888babfc98622fb2b95f27babf59cb9c5b8)

</div>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1438

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器