下面由laravel教程栏目给大家介绍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

立即学习“前端免费学习笔记（深入）”；

天工SkyMusic

基于昆仑万维“天工3.0”打造的AI音乐生成工具，是目前国内唯一公开可用的AI音乐生成大模型

247 查看详情

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模板

getLocale() }}">                
    

访问 127.0.0.1 ,即可看到laravel-mix欢迎页 , END