详解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 &＃39;vue-router&＃39;;

let routes = [
    {
        path: &＃39;/&＃39;,
        component: require(&＃39;./components/你的组件名字&＃39;)
    }
];

export default new VueRouter({
    routes
});

2 . 导入路由

修改 /resources/assets/js/app.js

// 导入路由包
import VueRouter from &＃39;vue-router&＃39;;

// use
Vue.use(VueRouter);

// 导入路由文件
import routes from &＃39;./routes.js&＃39;;

const app = new Vue({
    el: &＃39;#app&＃39;,
    // 使用路由
    router: routes
});

3 . 编译

回到根目录

npm run dev 
npm run watch 
# 任选其一

4 . 修改laravel默认的 / 路由指向的welcome模板

getLocale() }}">