laravel 使用 vue （gulp）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1）首先要安装 gulp

看这里 http://www.cnblogs.com/tujia/p/6397779.html 

2）编辑js

默认 laravel 里有一个 /resources/assets/js/app.js  这个 gulp 要编译文件，gulp 将 /resources/assets/js/app.js 编译成 /public/js/app.js 文件，/public/js/app.js 在公共底部被引用

虽然 /resources/assets/js 里只有一个 app.js，但不代表你只能写一个 js，你可以写自己的js，再用 larave-exlixir 工具合并成一个 js 

elixir(function(mix) {
    mix.scripts([
        'order.js',
        'forum.js'
    ]);
});

PS:默认保存在 /public/js/all.js 里，当然也可以自己改保存路径

elixir(function(mix) {
    mix.scripts(['app.js', 'controllers.js'], 'public/js/app.js')
       .scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});

如果你还想懒一点，可以直接给一个js目录就可以打包了（默认保存在 /public/js/all.js 里）

elixir(function(mix) {
    mix.scriptsIn('public/js/some/directory');
});

3）应用 js 

终端运行 gulp 命令就可以编译打包 js 了

gulp

如果你想压缩 js，可以加上 --product 参数

gulp --product

4）debug 模型

在开发阶段，如果你觉得每次修改后都要执行 gulp 命令比较麻烦，那你可以使用下面这个侦听命令

gulp watch

它会侦听项目里的文件变化，如果文件发生的修改就会自动编译了，不需要重复执行 gulp 命令

5）温馨提示

laravel 公共模版里引用 app.js 没加版本号，app.js 会被浏览器缓存了，所以有时候你刷新可能会看不到变化，你可以加一个时间戳（测试的时候，正式环境建议在后台加一个“版本号”配置）

<script src="/js/app.js?{{rand()}}"></script>

<script src="/js/app.js?{{$app_version}}"></script>

完

以上是 laravel 使用 vue （gulp） 的全部内容， 来源链接： utcz.com/z/380076.html

回到顶部