這篇文章主要介紹了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';
// use
Vue.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>感謝你能夠認真閱讀完這篇文章，希望小編分享的“Laravel前端工程化之mix的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
