工作流

4.0

4.0

Laravel Mix 中文文档 /

Laravel 工作流程

我们先回顾一下通用的工作流程以便你能在自己的项目上采用。

1: 安装 Laravel

laravel new my-app

2: 安装 Node 依赖

npm install

3: 查看 `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'
);

默认会启用 JavaScript ES2017 + 模块绑定，就行 sass 编译一样。

4: 编译

用下面的命令编译。

node_modules/.bin/webpack

也可以使用 package.json 里的 npm 脚本命令：

npm run dev

然后会看到编译好的文件：

./public/js/app.js
./public/css/app.css

监听前端资源更改：

npm run watch

Laravel 自带了一个 ./resources/assets/js/components/Example.vue 文件，修改一下，保存后会看到一个系统通知。

Tip: 当 Laravel 应用程序中的任何相关文件发生更改时，您也可以使用mix.browsersync（'myapp.test'） 自动重新加载浏览器。

5: 更新视图文件

好的，再次发布Laravel欢迎页面。我们可以将它作为我们的演示。将其更新为：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Laravel</title>

        <link rel="stylesheet" href="{{ mix('css/app.css') }}" />
    </head>
    <body>
        <div id="app"><example></example></div>

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

并在浏览器中重新加载页面。很好 ! 成功了。

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://learnku.com/docs/laravel-mix/4.0...

译文地址：https://learnku.com/docs/laravel-mix/4.0...

Markdown 文本

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

贡献者：3

工作流

4.0

4.0

Laravel 工作流程

1: 安装 Laravel

2: 安装 Node 依赖

3: 查看 `webpack.mix.js`

4: 编译

5: 更新视图文件

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

工作流 4.0 4.0

Laravel 工作流程

1: 安装 Laravel

2: 安装 Node 依赖

3: 查看 webpack.mix.js

4: 编译

5: 更新视图文件

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录

工作流

4.0

4.0

3: 查看 `webpack.mix.js`