Laravel前端工程化中mix如何改写为长尾关键词？

2026-04-18 10:343阅读0评论SEO资讯
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计510个文字，预计阅读时间需要3分钟。

Laravel前端工程化中mix如何改写为长尾关键词？

以下由Laravel教程栏目为大家介绍Laravel前端工程化之Mix，希望对需要的朋友有所帮助！

Laravel前端工程化之Mix：在Laravel 5.3之前，前端工程化依赖于gulp，而到了5.4的时候，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

Laravel前端工程化中mix如何改写为长尾关键词？

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视频教程

以上就是详解Laravel前端工程化之mix的详细内容，更多请关注自由互联其它相关文章！