欢迎光临
我们一直在努力

详解Laravel前端工程化之mix

下面由laravel教程栏目给大家介绍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

配置

  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';

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

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

相关推荐:最新的五个Laravel视频教程

赞(0)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《详解Laravel前端工程化之mix》
文章链接:https://www.rsspt.com/564.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。