最適合入門的Laravel中級教程(四)前端開發

Laravel 使用 npm 安裝前端依賴;
npm 是一個類似 composer 的工具;
用于管理前端的各種依賴包;
在使用之前需要先安裝 node ;
Windows 下可以在官網下載安裝: https://nodejs.org/zh-cn
Mac 上可以通過 brew 安裝;

brew install node

node 已經捆綁了 npm 不需要單獨安裝 npm 了;
但是因為那堵墻的原因還需要設置淘寶的 npm 鏡像;

npm config set registry https://registry.npm.taobao.org

然后就可以執行安裝命令了;

npm install

在 Laravel 項目根目錄下有一個類似 composer.json 的 package.json 文件;

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.17",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7"
    }
}

當執行 npm install 的時候就和 composer install 一樣;
安裝完成后會生成 package-lock.json 文件;
想下 composer.lock 就能知道 package-lock.json 的作用了;
package.json 中的 scripts 和 composer.json 中的 script 作用也類似;
比如說上面的 dev script 就可以通過下面這種方式運行:

npm run dev

在開發中常用下面這 3 個命令;
| 命令 | 作用 |
| dev | 編譯、合并 |
| prod | 編譯、合并、壓縮 |
| watch | 自動監聽文件變動進行編譯、合并 |
這些 script 都是依賴 webpack 來打包壓縮合并;
webpack 的配置對后端開發人員來說有那么一點不直觀;
Laravel 官方又提供了 laravel-mix 來簡化 webpack ;
在 Laravel 項目根目錄中的 webpack.mix.js 就是 webpack 的配置文件;

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

這里面分別定義了前端資源的源文件和處理后的目標文件路徑;
| 處理前的源文件 | 處理后的文件目錄 |
| resources/assets/js/app.js | public/js |
| resources/assets/sass/app.scss | public/css |
默認情況下 resources/assets/js/app.js 中引入了 bootstrap.js 和 vue.js ;
這里示例先只保留 bootstrap.js ;
resources/assets/js/app.js

require('./bootstrap');

當我們想使用某個前端插件的時候我們可以去 https://npmjs.com 上搜索;
這一步又跟 composer 的 https://packagist.org 一毛一樣;
掌握了 composer 的使用后再看 npm 也是可以很快入手的;
比如說我們想找一個 bootstrap 的日期插件;

安裝插件;

npm i bootstrap-datepicker

然后引入 css 文件;
resources/assets/sass/app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

@import "~bootstrap-datepicker/dist/css/bootstrap-datepicker";

引入 css 文件使用的是 import
路徑可以點開 node_modules 目錄查看;
除了引用 node_modules 目錄下的文件還可以引用自己創建的文件;
比如說創建一個 resources/assets/js/bootstrap-datepicker.js 文件;

require('bootstrap-datepicker/dist/js/bootstrap-datepicker');
$('.datepicker').datepicker();

引入 js 文件使用的是 require ;
在 resources/assets/js/app.js 中引入 bootstrap-datepicker ;

require('./bootstrap');
require('./bootstrap-datepicker');

編譯合并壓縮:

npm run prod

創建示例路由 routes/web.php ;

Route::view('mix/view', 'mix.view');

創建視圖文件 resources/views/mix/view.blade.php ;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>

<input class="datepicker" type="text">

<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

這里使用 asset() 函數生成資源鏈接;

一個日期插件就這樣完成了;
查看源代碼可以發現所有的 css 和 js 內容都合并成了 app.css 和 app.js;

但是現在還不完美;
因為當我們改動文件后容易因為緩存不能及時加載新的 css 和 js ;
常見的做法是給 css 和 js 加個版本號;
這在 Laravel 也很容易實現;
只需要在 webpack.mix.js 中使用 version();
webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .version();

視圖文件中把 asset() 換成 mix() 即可;
resources/views/mix/view.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>

<input class="datepicker" type="text">

<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>


收工;

白俊遙博客
請先登錄后發表評論
  • latest comments
  • 總共8條評論
白俊遙博客

Jay:CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token這個怎么解決,按照你的方法,點擊日期沒有效果

2019-11-08 18:19:48 回復

白俊遙博客

辣條要甜點白俊遙博客

2019-08-08 15:52:08 回復

白俊遙博客

buptzlk:推薦一個博客項目,后端使用laravel5.8開發,前端vue,前后分離,https://github.com/beijing-xiaotinghua/layBlog-ui 歡迎交流學習

2019-08-03 16:33:30 回復

白俊遙博客

Lee Jimpey:WARNING in ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/lib/loader.js??ref--5-5!./resources/sass/app.scss)Module Warning (from ./node_modules/resolve-url-loader/index.js):(Emitted value instead of an instance of Error)? ?resolve-url-loader cannot operate: CSS error? ENOENT: no such file or directory, open '/phpStudy/PHPTutorial/WWW/ljpblog/resources/sass/bootstrap-datepicker.css.map'? at Object.openSync (fs.js:436:3)

2019-07-20 23:18:37 回復

白俊遙博客

Lee Jimpey:我的datepicker不顯示,npm run prou后提示: warning? in ./resources/sass/app.scssModule Warning (from ./node_modules/resolve-url-loader/index.js):(Emitted value instead of an instance of Error)? ?resolve-url-loader cannot operate: CSS error? ENOENT: no such file or directory, open '/phpStudy/PHPTutorial/WWW/ljpblog/resources/sass/bootstrap-datepicker.css.map'? at Object.openSync (fs.js:436:3)

2019-07-20 23:12:25 回復

白俊遙博客

 :哈哈

2019-05-22 15:28:32 回復

白俊遙博客

sangjia:老哥,這算是全部完結嗎?

2019-04-09 23:12:04 回復

白俊遙博客 白俊遙博客
  • 云淡風晴 回復 sangjia:沒有;為了寫 api 開發教程;先穿插了一部分 OAuth 的內容;等這些鋪墊內容完成后;會繼續 Laravel 教程系列;
  • 2019-04-14 22:12:21 回復
白俊遙博客
  • xiaoshixiaowen 回復 云淡風晴:阿薩德發
  • 2019-07-22 12:42:30 回復
白俊遙博客

████████████白俊遙博客

2019-03-18 17:27:35 回復

欢乐时时彩官网-首页