Laravel-mix及模板调用问题
来源:互联网 发布:巴洛特利废了知乎 编辑:程序博客网 时间:2024/06/05 09:49
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放结尾,如:
<linkhref="{{ mix('css/app.css')}}"rel="stylesheet">
<scriptsrc="{{ mix('js/app.js')}}"></script>
(注意:子视图的css和js样式一定要放在section中,通过yield引用,而且要放在公用样式之后,否则会被覆盖!)- Laravel-mix及模板调用问题
- Laravel5.5 使用Laravel Mix编译Less
- Vue单页应用开发流程 (Laravel + Vue + Laravel-mix)
- Laravel 使用遇到的问题及解决方法
- Laravel 使用遇到的问题及解决方法
- 存储过程模板及调用
- Laravel小项目之第2节 Laravel-静态资源管理及模板布局
- MIX
- laravel模板布局
- Laravel blade 模板积累
- laravel之模板使用
- Laravel - 模板继承
- Laravel blade 模板积累
- Laravel-Blade模板引擎
- Laravel Blade模板引擎
- laravel笔记-模板
- laravel blade模板
- laravel homestead vagrant box安装使用,问题,及相关命令
- android退出动画失效问题
- Mybatis 用到的设计模式
- java、android可用的rtp封包解包h264
- Oracle创建序列,删除序列
- 【SpringBoot】SampleApplication最简单的Spring Boot创建;
- Laravel-mix及模板调用问题
- LeetCode 575. Distribute Candies
- 利用R语言分析挖掘Titanic数据集(三)
- 采购单
- Android多进程Process开发总结-优点与缺陷
- STL中const迭代器与const_iterator区别
- 从包中构建瓦片服务器
- Dubbo 设计模式
- 应用到文本领域的卷积方法