下载安装laravel
composer create-project --prefer-dist laravel/laravel laravel-element "5.8.*"
在环境搭建的前提是已经在本地搭建好了laravel框架,并且安装npm.
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 文件，渲染组件
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,访问项目
到目前为止，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>
11.再次编译前端资源，运行
npm run dev
12.访问
好了，到目前为止，Laravel5.5 + Vue2 + Element 的环境搭建已经完成了，为了方便理解，第一次的搭建过程尽量简洁。本文下面的部分将使用 Vue 路由等等，逐步完善，便于后期的开发。
13.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 标签中，问题可解决。
14.使用 Vue Router
构建大型项目时，使用 Vue Router 将是一个好的方式，它可以帮助你更好的组织代码，优化路由。
14.1 安装 vue-router
执行命令，安装 vue-router
npm install vue-router --save-dev
14.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))
}
]
});
14.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 文件为
require('./bootstrap');
window.Vue = require('vue');
// 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)
});
14.4.重新编译
npm run dev
通过路由访问 hello 组件
axios请求
vue数据请求一般用axios，尤大也推荐这个，而且laravel有自带的vue相关例子，axios不需要你自己进行配置安装，可以在package.json里面查看版本，composer安装的axios版本是0.15，可以自己再进行更新
1. 在resources/js/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: '/',
component: resolve => void(require(['../components/Hello.vue'], resolve))
},
{
name: 'login',
path: '/login',
component: resolve => void(require(['../components/Login.vue'], resolve))
}
]
});
2. 在router/web.php添加laravel路由
Route::get('/', function () {
return view('index');
});
Route::post('admin/login', 'Admin\LoginController@login_submit');
3. 在app/httpcontroller/admin下 新建LoginController
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use App\Models\QsAdmin;
use Illuminate\Http\Request;
class LoginController extends Controller{
public function login_submit(Request $request){
//这里是你的登录逻辑
}
}
4. 在resources/js/components下新建Login.vue文件
用的element的表单组件
<template>
<div class="login-container">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-position="left"
label-width="0px" class="demo-ruleForm login-page">
<h3 class="title">后台登录</h3>
<el-form-item prop="name">
<el-input type="text" v-model="ruleForm.name" autocomplete="off" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
var checkUser = (rule, value, callback) => {
if (!value) {
return callback(new Error('用户名不能为空'));
}
setTimeout(() => {
if (value.length > 30) {
callback(new Error('长度不能超过30'));
} else {
callback();
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
return {
ruleForm: {
name: '',
pass: ''
},
rules: {
name: [
{ validator: checkUser, trigger: 'blur' }
],
pass: [
{ validator: validatePass, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
var parm = {};
let t = this;
axios.post('/admin/login', {
name : this.$refs[formName].model.name,
pass : this.$refs[formName].model.pass
})
.then(function (response) {
tips(response.data.message); //这是项目定义的消息提示
t.$router.push({path:'/hello'});
})
.catch(function (error) {
console.log(error);
});
//alert('submit!');
} else {
console.log('验证不通过，提交错误');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
.login-container {
width: 100%;
height: 100%;
}
.login-page {
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 180px auto;
width: 350px;
padding: 35px 35px 15px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
margin: 0px 0px 15px;
text-align: left;
}
</style>
发送请求，通过你的登录逻辑返回数据，成功跳转新的页面。
878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
