最新消息: 关于Git&GitHub 版本控制你了解多少?
您现在的位置是:群英 > 开发技术 > PHP语言 >
【Laravel前端】对于mix了解多少?
PHP中文网发表于 2021-05-20 17:29 次浏览
下面由群英网络给大家介绍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>

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

以上就是详解Laravel前端工程化之mix的详细内容,更多请关注群英网络其它相关文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
相关信息推荐
2021-09-15 18:27:44 关键词:laravel写法
摘要:今天给大家分享laravel优雅框架写法,新手在刚接触laravel框架就要注意写法的问题,对于laravel的一些写法要注意,养成好的习惯。对此,小编给大家整理了一些Laravel 不太建议的写法,大..
2021-09-15 18:27:29 关键词:laravel框架路由
摘要:laravel框架路由有多少种?在laravel框架中,常见的路由有post,get,put,patch,delete,options。接下来我们就来了解一下它们的写法以及要注意的问题。..
2021-09-15 18:27:20 关键词:laravel框架的优点
摘要:laravel框架的优点和主要功能是什么?对于laravel框架的优点有很多,例如功能多、开源项目多、测试方便和有强大的表单验证功能等等。这篇文章小编就给大家来详细的介绍一下laravel框架..
2021-09-15 18:27:04 关键词:laravel 辅助函数
摘要:今天给大家分享laravel中辅助函数optional()的内容,小编觉得optional()非常实用,因此分享给大家做个参考,下文有对optional()的应用场景及使用有详细介绍,感兴趣的朋友可以参考。..
2021-09-07 18:12:27 关键词:Laravel子查询
摘要:Laravel子查询语句怎么样使用?今天小编就给大家分享一篇Laravel子查询语句使用的实例,对大家学习Laravel子查询有一定的帮助,有需要的朋友可以参考,接下来跟随小编来看看吧。..