Laravel-mix及模板调用问题

Laravel中composer用于管理php依赖，而npm用于管理前端依赖

1.升级npm

确保下载依赖不出错

npm install npm -g

如果有权限问题则

sudo npm install npm -g

检查node和npm版本是否最新：

node -v

npm -v

发生权限错误则给出权限，输入：

sudo chown-R $USER:$(id -gn $USER) /home/vagrant/.config

 

2.安装package.json中的前端依赖

cd到项目根目录下

npm install

如果在windows虚拟机中，由于禁止共享文件建立软链接，所以需要增加选项

npm install--no-bin-links

（如果安装出错，可以删除项目根目录下的node_moudles目录，重新安装）

 

3.使用Laravel-mix编译整合前端资源

Laravel5.4中mix抛弃了gulp改用webpack，后者对API更加友好

npm run dev

如果报错cross-env：not found，建议用旧版的指令替换，具体操作为，将package.json中script中的内容修改为：

"prod": "npm run production",
"dev": "nodenode_modules/cross-env/dist/bin/cross-env.js NODE_ENV=developmentnode_modules/webpack/bin/webpack.js --progress --hide-modules--config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "nodenode_modules/cross-env/dist/bin/cross-env.js NODE_ENV=developmentnode_modules/webpack/bin/webpack.js --watch --progress --hide-modules--config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "nodenode_modules/cross-env/dist/bin/cross-env.js NODE_ENV=developmentnode_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules--config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "nodenode_modules/cross-env/dist/bin/cross-env.js NODE_ENV=developmentnode_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot--config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "nodenode_modules/cross-env/dist/bin/cross-env.js NODE_ENV=productionnode_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

再执行npm run dev

 

4.下载并导入前端资源

cd /resources/assets/

mkdir css

cd css

wget 前端css资源网址

cd ../../js

wget 前端js资源网址

资源文件存放在assets下的css和js文件夹中，我们需要将其导入到项目中

导入js文件：

打开assets/js/bootstrap.js，在require(jquery)下添加资源名，如：

window.$ =window.jQuery = require('jquery');
require('bootstrap-sass');
require('./select2.min');

导入css文件：

打开assets/sass/app.scss，import资源，如：

@import "./../css/select2.min";

 

5.mix使用

如果要让前端资源随着开发改动自动编译且避免样式缓存问题，则在webpack.mix.js中添加.version()，如下：

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

执行监听

npm run watch

在public/css和js下会生成带哈希码的css和js文件，这个就是我们要导入视图的资源

一般把编译整合后的资源放在app.blade.php中，css放开头，js放结尾，如:

<link href="{{ mix('css/app.css') }}" rel="stylesheet">

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

（注意：子视图的css和js样式一定要放在section中，通过yield引用，而且要放在公用样式之后，否则会被覆盖！）