首页-教程-开发语言

详解Laravel前端工程化之mix

 3262

下面给大家介绍Laravel前端工程化之mix，希望对需要的朋友有所帮助！


详解Laravel前端工程化之mix


在laravel5.3之前 , 前端工程化依赖 gulp ,在5.4的时候laravel为我们带来了全新的前端工具mix

本节记录从0到看到mix打包完成 ,laravel渲染出helloworld

阅读本节前提 : 需要有laravel和vue使用经验或对前后端工程化有清晰的认知

安装

1 . 安装laravel

  1. composer create-project laravel/laravel learn-mix

2 . 安装前端依赖

  1. cd learn-mix ; npm install

3 . 安装vue-router

  1. npm install vue-router

配置

1、建立路由文件

新建 /resources/assets/js/routes.js ,并写入以下内容

  1. import VueRouter from 'vue-router';
  2.  
  3. let routes = [
  4.     {
  5.         path: '/',
  6.         component: require('./components/你的组件名字')
  7.     }
  8. ];
  9.  
  10. export default new VueRouter({
  11.     routes
  12. });

2、导入路由

修改 /resources/assets/js/app.js

  1. // 导入路由包
  2. import VueRouter from 'vue-router';
  3.  
  4. // use
  5. Vue.use(VueRouter);
  6.  
  7. // 导入路由文件
  8. import routes from './routes.js';
  9.  
  10. const app = new Vue({
  11.     el: '#app',
  12.     // 使用路由
  13.     router: routes
  14. });

3、编译

回到根目录

  1. npm run dev 
  2. npm run watch 
  3. # 任选其一

4、修改laravel默认的 / 路由指向的welcome模板

  1. <!doctype html>
  2. <html lang="{{ app()->getLocale() }}">
  3. <head>
  4.     <!--导入编译好的CSS-->
  5.     <link rel="stylesheet" href="/css/app.css">
  6.     <!--导入CSRF_TOKEN-->
  7.     <meta name="csrf-token" content="{{ csrf_token() }}"/>
  8. </head>
  9. <body>
  10. <p id="app">
  11.     <router-view></router-view>
  12. </p>
  13. <!--导入编译好的JS-->
  14. <script src="/js/app.js"></script>
  15. </body>
  16. </html>

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



TAG标签：
本文网址：https://www.zztuku.com/index.php/detail-8819.html
站长图库 - 详解Laravel前端工程化之mix
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐