laravel搭建基本的前端脚手架

关于laravel

Laravel 是一个基于 PHP 语言的 Web 开源框架,虽然Laravel 并不强制使用哪个 JavaScript or CSS 预处理器,但它提供了适用于许多应用场景的 BootstrapReact,和 Vue

项目结构

默认情况下,Laravel 使用 NPM 安装前端软件包,本文使用Vue作为JavaScript框架和Sass这门最早最成熟的Css预处理器。归根结底还是要把CSS、JS整合起来交给浏览器去渲染,webpack就是这个前端资源大总管。

Laravel Mix 提供了干净的、富有表现力的 API,用于编译 Sass 或 Less,它们能够拓展原始的 CSS,拥有向 CSS 中添加变量、mixins 和其它使 CSS 更好用的强大特性,也可以轻松将 Vue、React 组件编译到单个的、基于浏览器的 JavaScript 文件中。

1614528169000image.png

页面组装

了解完背景,我们跳过nmp install ...... ?,直接来看每个页面是怎么搭建出来的。

比如下面这个页面,我们先把公共部分的页头、页尾拆出来,把每个栏目看做一个功能模块,我们做的就是把这些功能实现然后组装起来。

首页.png

既然页面的基本骨架head、content、footer是一样的,那么每个组装的公共模块所使用的js、css也都是一样的。

页面的基本骨架如下:

app.css、app.js是全局通用的css、js文件,这些@stack、@yield是laravel的模板语法,用来给对应位置选择性添加该页面所需的模块/资源。

1614529681000image.png

home页是基于上面的结构扩展,然后再引入自身独特的css样式以及导入所需的功能模块。

1614529918000image.png

管理CSS、JS

同样也是这些耳熟能详的component/模块化理念,app.scss类比init文件,是网站css中最通用最基础最核心的部分。

如果你有一个 Scss 或 Sass 文件需要引入, 但是你又不希望它被编译为一个 CSS 文件, 这时,你就可以在文件名前面加一个下划线,就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。 然后,你就可以像往常一样引入这个文件了,而且还可以省略掉文件名前面的下划线,比如这些_variable、_minxins...。

1614530206000image.png

home.scss就是该页面独有的功能模块和页面结构样式文件,虽然也import了_variable,但是不会被编译,但是parts/下面的css单文件是正常编译的scss文件。

1614530377000image.png

JavaScript文件同样,一个页面通常包含至少3个js文件,app.js是jquery、axios、utils等基础lib,components.js是通用的vue component,再加上页面独有js交互、业务逻辑等等。

明白一个页面是如果组装出来的,就搞清楚了这些相辅相成的模块和文件的由来,最后npm run dev/watch把这些复杂的文件编译、组合、打包成浏览器识别的html、css、js文件。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容