下面由laravel教程栏目给大家介绍laravel前端工程化之mix，希望对需要的朋友有所帮助！
laravel前端工程化之mix在laravel5.3之前 , 前端工程化依赖 gulp ,在5.4的时候laravel为我们带来了全新的前端工具mix
本节记录从0到看到mix打包完成 ,laravel渲染出helloworld阅读本节前提 : 需要有laravel和vue使用经验或对前后端工程化有清晰的认知
安装1 . 安装laravel
composer create-project laravel/laravel learn-mix
2 . 安装前端依赖
cd learn-mix ; npm install
3 . 安装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';// usevue.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><p id="app"> <router-view></router-view></p><!--导入编译好的js--><script src="/js/app.js"></script></body></html>
访问 127.0.0.1 ,即可看到laravel-mix欢迎页 , end相关推荐：最新的五个laravel视频教程
以上就是详解laravel前端工程化之mix的详细内容。