Laravel前端工程化之mix

時間 2019-11-08

標籤 laravel 前端工程 mix 简体版

原文原文鏈接

在laravel5.3以前 , 前端工程化依賴 gulp ,在5.4的時候laravel爲咱們帶來了全新的前端工具mix
本節記錄從0到看到mix打包完成 ,laravel渲染出helloworld
閱讀本節前提 : 須要有laravel和vue使用經驗或對先後端工程化有清晰的認知javascript

安裝

1 . 安裝laravelcss

composer create-project laravel/laravel learn-mix

2 . 安裝前端依賴html

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 . 導入路由vue

修改 /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 . 編譯java

回到根目錄

npm run dev 
npm run watch 
# 任選其一

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

<!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>