最适合入门的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>