Laravel前端工程化之mix的示例分析

2023-06-14 12:19

短信预约 -IT技能 免费直播动态提醒

这篇文章主要介绍了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';// 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模板

<!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 class="lazy" data-src="/js/app.js"></script></body></html>