在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'; // 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视频教程
原文地址:https://www.jb51.cc/laravel/1199204.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。