新建 Laravel5.6 项目
composer create-project --prefer-dist laravel/laravel Larvuent laravue // 新项目名为
Larvuent 安装完成后
进入 项目根目录 cd Larvuent
npm install /cnpm install // 速度慢的请自行切换淘宝镜像 cnpm
3.修改 Laravel 路由
修改 routes/web.php 文件为
Route::get('/', function () {
return view('index');
});
4.新建 Hello.vue 文件
在 resources/assets/js/components 目录下新建 Hello.vue 文件
-
<template> -
<div> -
<h1>Hello, Larvue!</h1> -
<p class="hello">{{ msg }}</p> -
</div> -
</template> -
<script> -
export default { -
data() { -
return { -
msg: 'This is a Laravel with Vue and Element ' -
} -
} -
} -
</script> -
<style> -
.hello { -
font-size: 2em; -
color: green; -
} -
</style>
5.修改 app.js 文件，渲染组件
修改 resources/assets/js/app.js 文件
-
require('./bootstrap'); -
window.Vue = require('vue'); -
// Vue.component('example', require('./components/Example.vue')); // 注释掉 -
import Hello from './components/Hello.vue'; // 引入Hello 组件 -
const app = new Vue({ -
el: '#app', -
render: h => h(Hello) -
});
6.新建 Laravel 视图文件，和 Vue 交互
在 resources/views 目录下新建 index.blade.php 文件
-
<!doctype html> -
<html lang="en"> -
<head> -
<meta charset="UTF-8"> -
<title>Larvue</title> -
</head> -
<body> -
<div id="app"></div> -
<script src="{{ mix('js/app.js') }}"></script> -
</body> -
</html>
7.编译前端组件，运行
执行以下命令，编译前端资源
npm run dev8.引入 Element
执行命令，安装 ElementUI
npm i element-ui -S修改 resources/assets/js/app.js 文件
-
import Hello from './components/Hello.vue'; // 引入Hello 组件 -
import ElementUI from 'element-ui'; -
import 'element-ui/lib/theme-default/index.css'; -
Vue.use(ElementUI);
9.修改 Hello.vue 文件，使用 Element 组件
修改 resources/assets/js/components/Hello.vue 文件为
-
<template> -
<div> -
<h1>Hello, Larvue!</h1> -
<el-button @click="visible = true">按钮</el-button> -
<el-dialog v-model="visible"> -
<p>欢迎使用 Element</p> -
</el-dialog> -
</div> -
</template> -
<script> -
export default { -
data() { -
return { -
visible: false -
} -
} -
} -
</script> -
<style> -
.hello { -
font-size: 2em; -
color: green; -
} -
</style>
10.再次编译前端资源，运行
执行
npm run dev CSRF 防护
Laravel 为了避免应用遭到跨站请求伪造攻击(CSRF)，自动为每一个有效用户会话生成一个 CSRF 令牌，该令牌用于验证授权用户和发起请求者是否是同一个人。
修改 resources/views/index.blade.php 文件为
-
<!doctype html> -
<html lang="en"> -
<head> -
<meta charset="UTF-8"> -
<meta name="csrf-token" content="{{ csrf_token() }}"> -
<title>Larvue</title> -
</head> -
<body> -
<div id="app"></div> -
<script src="{{ mix('js/app.js') }}"></script> -
</body> -
</html>
安装 vue-router
执行命令，安装 vue-router
npm install vue-router --save-dev
配置 vue-router
在 resources/assets/js 目录下新建目录 router ，同时在 router 目录下新建 index.js 文件
-
import Vue from 'vue'; -
import VueRouter from 'vue-router'; -
Vue.use(VueRouter); -
export default new VueRouter({ -
saveScrollPosition: true, -
routes: [ -
{ -
name: 'hello', -
path: '/hello', -
component: resolve => void(require(['../components/Hello.vue'], resolve)) -
} -
] -
});
引入 vue-router
在 resources/assets/js 目录下新建 App.vue 文件
-
<template> -
<div> -
<h1>Hello, {{ msg }}!</h1> -
<router-view></router-view> <!--路由引入的组件将在这里被渲染--> -
</div> -
</template> -
<script> -
export default { -
data() { -
return { -
msg: 'Vue' -
} -
} -
} -
</script> -
<style> -
</style>
修改 resources/assets/js/app.js 文件为
-
// import Hello from './components/Hello.vue'; -
import App from './App.vue'; -
import ElementUI from 'element-ui'; -
import 'element-ui/lib/theme-default/index.css'; -
Vue.use(ElementUI); -
import router from './router/index.js'; -
const app = new Vue({ -
el: '#app', -
router, -
render: h => h(App) -
});
重新编译
npm run dev路由访问 hello 组件
以后如果要添加组件，只需在 resources/assets/js/components 目录下新建 vue 文件，在 resources/assets/js/router/index.js 文件里引入，然后就可以通过路由访问了。
代码拆分
代码拆分是将一些不经常变动的代码提取出来，以避免每次都要重新编译，如果你频繁更新应用的 JavaScript，需要考虑对 vendor 库进行提取和拆分，这样的话，一次修改应用代码不会影响 vendor.js 文件的缓存。
Laravel Mix 的 extract 方法可以实现这样的功能：
修改项目根目录下的 webpack.mix.js 文件
-
mix.js('resources/assets/js/app.js', 'public/js') -
.sass('resources/assets/sass/app.scss', 'public/css') -
.extract(['vue','axios']);
extract 方法接收包含所有库的数组或你想要提取到 vendor.js 文件的模块，使用上述代码作为示例，Mix 将会生成如下文件：
-
public/js/manifest.js // Webpack manifest runtime -
public/js/vendor.js // vendor 库 -
public/js/app.js // 应用代码
- 同时修改 resources/views/index.blade.php 文件为
-
<!doctype html> -
<html lang="en"> -
<head> -
<meta charset="UTF-8"> -
<meta name="csrf-token" content="{{ csrf_token() }}"> -
<title>Larvuent</title> -
</head> -
<body> -
<div id="app"></div> -
<script src="{{ mix('js/manifest.js') }}"></script> -
<script src="{{ mix('js/vendor.js') }}"></script> -
<script src="{{ mix('js/app.js') }}"></script> -
</body> -
</html>
全局的 mix 函数会根据 public/mix-manifest.json 中的路径去加载对应的文件，同时也要注意引入三个 js 文件的顺序，以避免出错。
重新执行命令，就可以了。
npm run dev使用下面的命令，可以监视前端资源的改变，并自动编译。
npm run watch
扫一扫
1450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
