脚本宝典收集整理的这篇文章主要介绍了Laravel前端工程化之mix，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
在laravel5.3之前 , 前端工程化依赖 gulp ,在5.4的时候laravel为我们带来了全新的前端工具mix
本节记录从0到看到mix打包完成 ,laravel渲染出helloworld阅读本节前提 : 需要有laravel和vue使用经验或对前后端工程化有清晰的认知
1 . 安装laravel
composer create-project laravel/laravel learn-mix2 . 安装前端依赖
cd learn-mix ; npm install3 . 安装vue-router
npm install vue-router新建 /resources/assets/js/routes.js ,并写入以下内容
import VueRouter from 'vue-router';
let routes = [
{
path: '/',
component: require('./components/你的组件名字')
}
];
export default new VueRouter({
routes
});2 . 导入路由
修改 /resources/assets/js/app.js
// 导入路由包
import VueRouter from 'vue-router';
// use
Vue.use(VueRouter);
// 导入路由文件
import routes from './routes.js';
const app = new Vue({
el: '#app',
// 使用路由
router: routes
});3 . 编译
回到根目录
npm run dev
npm run watch
# 任选其一4 . 修改laravel默认的 / 路由指向的welcome模板
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<!--导入编译好的CSS-->
<link rel="stylesheet" href="/css/app.css">
<!--导入CSRF_TOKEN-->
<meta name="csrf-token" content="{{ csrf_token() }}"/>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<!--导入编译好的JS-->
<script src="/js/app.js"></script>
</body>
</html>以上是脚本宝典为你收集整理的Laravel前端工程化之mix全部内容，希望文章能够帮你解决Laravel前端工程化之mix所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。