在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

配置

1. 建立路由文件

新建 /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模板

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