Laravel前端工程化之mix
在laravel5.3之前 , 前端工程化依赖 gulp ,在5.4的时候laravel为我们带来了全新的前端工具mix
本节记录从0到看到mix打包完成 ,laravel渲染出helloworld
本节记录从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
配置
- 建立路由文件
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>
<div id="app">
<router-view></router-view>
</div>
<!--导入编译好的JS-->
<script src="/js/app.js"></script>
</body>
</html>访问 127.0.0.1 ,即可看到laravel-mix欢迎页 , END
相关推荐
前端小白 2020-07-19
liduote 2020-11-13
chenhaotao 2020-11-13
localhost0 2020-11-12
小秋 2020-11-12
lxhuang 2020-11-03
学习web前端 2020-10-27
小焊猪web前端 2020-10-24
杏仁技术站 2020-10-23
南昌千网科技 2020-10-18
liduote 2020-10-16
BlueSkyUSC 2020-10-15
Doniet 2020-10-08
zjutzmh 2020-09-25
PncLogon 2020-09-24
趣IT 2020-09-22
杏仁技术站 2020-09-18
拾光璇旅 2020-09-17
kiven 2020-09-11