工作流

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 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

以构建论坛项目 LaraBBS 为线索，展开对 Laravel 框架的全面学习。应用程序架构思路贴近 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`#