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

時間 2020-08-10

標籤適合入門 laravel 中級教程前端開發简体版

原文原文鏈接

Laravel 使用 npm 安裝前端依賴；
npm 是一個相似 composer 的工具；
用於管理前端的各類依賴包；
在使用以前須要先安裝 node ；
Windows 下能夠在官網下載安裝： https://nodejs.org/zh-cn
Mac 上能夠經過 brew 安裝；javascript

brew install node

node 已經捆綁了 npm 不須要單獨安裝 npm 了；
可是由於那堵牆的緣由還須要設置淘寶的 npm 鏡像；php

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

而後就能夠執行安裝命令了；css

npm install

在 Laravel 項目根目錄下有一個相似 composer.json 的 package.json 文件；html

{ "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

let mix = require('laravel-mix'); mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css');

require('./bootstrap');

當咱們想使用某個前端插件的時候咱們能夠去 https://npmjs.com 上搜索；
這一步又跟 composer 的 https://packagist.org 一毛同樣；
掌握了 composer 的使用後再看 npm 也是能夠很快入手的；
好比說咱們想找一個 bootstrap 的日期插件； node

安裝插件；jquery

npm i bootstrap-datepicker

而後引入 css 文件；
resources/assets/sass/app.scsswebpack

// 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。