laravel5.7+Vue+ Element 环境搭建
2018-12-22 本文已影响0人
骚伦
在环境搭建的前提是已经在本地搭建好了laravel框架,并且安装npm.
image.png
1.安装前端依赖库
npm install
2.添加laravel路由
- 修改 routes/web.php 文件为
Route::get('/', function () {
return view('index');
});
3.新建 Hello.vue 文件
- 在 resources/js/components 目录下新建 Hello.vue 文件
<template>
<div>
<h1>Hello, Larvuent!</h1>
<p class="hello">{{ msg }}</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'This is a Laravel with Vue and Element Demo.'
}
}
}
</script>
<style>
.hello {
font-size: 2em;
color: green;
}
</style>
4.修改 app.js 文件，渲染组件
- 修改 resources/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)
});
- 说明：app.js 是构建 Vue 项目的主文件，最后所有的组件都会被引入到这个文件，在引入所有组件之前，bootstrap.js 文件做了一些初始化的操作。同时，因为有了 window.Vue = require(‘vue’) 这句话，就不再需要使用 import Vue from ‘vue’ 重复导入 Vue 了。*
5.新建 Laravel 视图文件，和 Vue 交互
- 在 resources/views 目录下新建 index.blade.php 文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Larvuent</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
说明：你可能在其他教程中看到有的在使用 assets 函数，这两个函数的主要区别就是 assets 函数会直接使用所填路径去 public 文件夹下找文件，而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新相关的，如果现在还不明白，不要紧，你记得使用 mix 函数就好了，然后继续往后看。
6.编译前端组件，运行
- 执行以下命令，编译前端资源
npm run dev
该命令默认会去执行根目录下的 webpack.mix.js 文件，使用 Laravel 提供的 Laravel Mix 编译资源，并将编译好的资源放在根目录 public 文件夹下。
说明：前端编译工具有许多，比如 gulp、webpack 等等，Laravel 也为自己提供了开箱即用的编译工具，比如 Laravel5.3 及更早版本提供基于 gulp 的 Laravel Elixir 和从 Laravel5.4 开始提供基于 webpack 的 Laravel Mix，当然你也可以不使用官方提供的工具，自己去配置编译工具。这些编译工具的作用都是一样的，使用方法也大同小异。前面说过，本文第一次安装尽量简单，能运行即可，所以不再去配置前端编译工具，使用官方提供的即可。
7,访问项目
image.png
到目前为止，Laravel + Vue 已经完成了，下面开始引入 Element .
8.引入 Element
- 执行命令，安装 ElementUI
npm i element-ui -S
9.修改 resources/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);
10.修改 Hello.vue 文件，使用 Element 组件
- 修改 resources/js/components/Hello.vue 文件为
<template>
<div>
<h1>Hello, Larvuent!</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
11.访问
image.png
好了，到目前为止，Laravel5.5 + Vue2 + Element 的环境搭建已经完成了，为了方便理解，第一次的搭建过程尽量简洁。本文下面的部分将使用 Vue 路由等等，逐步完善，便于后期的开发。
12.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>Larvuent</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
创建一个 meta 标签并将令牌保存到该 meta 标签中，问题可解决。
13.使用 Vue Router
- 构建大型项目时，使用 Vue Router 将是一个好的方式，它可以帮助你更好的组织代码，优化路由。
13.1 安装 vue-router
- 执行命令，安装 vue-router
npm install vue-router --save-dev
13.2配置 vue-router
- 在 resources/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))
}
]
});
13.3.引入 vue-router
- 在 resources/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/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)
});
13.4.重新编译
npm run dev
- 通过路由访问 hello 组件
