02.前端模块化与include视图

laravel 02

前端模块化

webpack.mix.js文件是编译js和css的

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

编译 resources/ 下的 app.js 和 app.scss 文件 放到 public 目录下。 app.js 和 app.scss 可以看做入口文件

安装 package.json 中的依赖

npm install 安装 前端库 （ps：使用淘宝 cnpm 加速）

安装成功 会出现一个 node_modules 文件夹

编译 npm run watch 本质是监听修改

修改 resources/js/app.js 或者 resources/sass/app.scss 会自动编译

DONE  Compiled successfully in 24908ms                                                                                            10:30:26
       Asset      Size   Chunks             Chunk Names
/css/app.css   173 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.38 MiB  /js/app  [emitted]  /js/app

视图中引用经过编译的 css 和 js (public 目录下的)

<link rel="stylesheet" href="/css/app.css">
<!-- 其他内容  -->
<script src="/js/app.js"></script>

视图的复用

1. 新建 resources/views/layouts/default.blade.php 文件作为复用

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">VDong</a>
     code ...
</nav>

1. 视图中引用

@include('layouts.default')