laravel5.5 + vue2.* +element-ui_搞前端的半夏的博客-CSDN博客_laravel+elementui
laravel5.5 + vue2.* +element-ui
搞前端的半夏
于 2018-03-07 08:16:31 发布
7898
收藏
分类专栏：
vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shangyanaf/article/details/79465877
版权
vue
专栏收录该内容
8 篇文章
0 订阅
订阅专栏
首发于北陌个人博客
一 首先修改packgae.json并下载依赖库
1 。 laravel自带vue ，只需要添加 vue-router vuex vue-resource element-ui
2 。 然后进入命令行执行 npm install 进行依赖的安装
二 安装好依赖之后开始使用
文件目录 在进行下一步之前先把文件创建好
1. 找到resource/assets/js文件夹,在app.js中进行编辑，（这个文件相当于vue中的main.js），文件中有的代码均可以删除。具体详见代码注释。
import Vue from 'vue' //引入vue
import VueRouter from 'vue-router'//引入vue-router
import ElementUI from 'element-ui';//引入element-ui
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(VueRouter)//使用vue-router
Vue.use(ElementUI)//使用element-ui
import App from './views/App' //加载views文件夹下的App组件
import About from './views/About'//同上
import Home from './views/Home'//同上
const router = new VueRouter({//定义路由
mode: 'history',
routes: [
path: '/',
name: 'home',
component: Home
},
path: '/about',
name: 'About',
component: About,
},
],
});
const app = new Vue({//实例化Vue
el: '#app',
components: { App },
router,
});
App.vue文件
<template>
<div>
<el-container>
<el-header>
<Nav></Nav>//使用组件
</el-header>
<el-main>
<router-view></router-view>//展示区
</el-main>
<el-footer>
footer
</el-footer>
</el-container>
</div>
</template>
<script>
import Nav from "./../components/Nav.vue"//引入components中的Nav组件
export default {
components:{
Nav,
},
name:"app",
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header {
padding: 50px 0px 100px 0px;
background-color: #B3C0D1;
color: #333;
.el-footer{
background-color: #B3C0D1;
color: #333;
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
width: 100%;
height: 500px;
.el-container {
margin-bottom: 40px;
</style>
Home.vue(About.vue与之类似)
<template>
<h1>This is the homepage</h1>
</template>
<script>
export default {
name: "home"
</script>
<style scoped>
</style>
Nav.vue
<template>
<div class="navclass">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">
<router-link to="/">主页</router-link>
</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3">消息中心</el-menu-item>
<el-menu-item index="4">
<router-link to="/about" >about</router-link>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name:"Nav",
data() {
return {
activeIndex: '1',
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
</script>
<style scoped>
a{
text-decoration:none;
.navclass{
padding-left: 150px;
padding-right: 150px;
</style>
新建spa.blade.php文件并创建控制器（php make:controller SpaController）在web.php中添加路由,
Route::get('/{any}', 'SpaController@index')->where('any', '.*');
并在SpaController.php中添加
public function index(){
return view('spa');
spa.blade.php文件中使用vue的组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue SPA Demo</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{ asset('js/app.js') }}"></script>//引入vue
</body>
</html>
三 运行：两个命令行：
npm run watch //可以监控页面的变化
php artisan serve //运行程序
四 运行的效果
搞前端的半夏
关注
关注
点赞
收藏
打赏
评论
laravel5.5 + vue2.* +element-ui
首发于北陌个人博客一 首先修改packgae.json并下载依赖库1 。 laravel自带vue ，只需要添加 vue-router vuex vue-resource element-ui2 。 然后进入命令行执行 npm install 进行依赖的安装二 安装好依赖之后开始使用文件目录 在进行下一步之前先把文件创建好 1. 找到resour...
复制链接
扫一扫
专栏目录
SpringCloud微服务架构前后端分离项目实践
weixin_50196917的博客
06-07
2949
一款 Java 语言基于 SpringCloud、Vue、ElementUI、MySQL等框架精心打造的一款前后端分离框架，致力于实现模块化、组件化、可插拔的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，前端Vue端支持多主题切换，可以根据自己喜欢的风格选择想一个的主题的个性化呈现的需
laravel-vue：使用laravel5.4 + vue2.0 + elementui
02-03
技术应用
laravel5.4 + vue2 + vuex + vue-路由器+ webpack + ES6 / 7 + elementui +七牛云存储+ redis + sass
要求
PHP 5.6或更高版本（PHP 7最好）
mysql 5.6或更高版本
作曲家（下载链接： : ）
nodejs（下载链接： ://nodejs.cn/download/）
npm（nedejs的新版本已包含它）
安装
1.克隆源代码或创建新项目。
git克隆
2.设置基本配置
cp .env.example .env
3.创建laravel app_key并创建数据库
PHP的工匠键：生成
php artisan migration：refresh --seed（必须设置数据库配置）
4.安装扩展程序包依赖项
作曲家安装
npm安装
如果npm速度较慢，可以执行命令（npm install -g cnpm --registry = 这样做，npm应该更改为cnpm
5.安装纱线并运行
npm install -g纱
纱线运行开发
现在我们可以访问它，谢谢您的阅读！
预习
将来更新，
参与评论
您还未登录，请先
登录
后发表或查看评论
vue+laravel前后端分离项目中使用laravel-echo
最新发布
小幺的博客
10-24
776
利用laravel的 laravel-echo 与 vue前后端分离交互（socket通信）案例
1-element-ui创建项目
chencaw的专栏
05-11
459
1、element-ui创建项目
vue create chenelementdemo
2、测试是否安装好
npm run serve
laravel+element-ui+vue 环境搭建
The_classic3的博客
04-12
1052
1.composer create-porject --prefer-dist laravel/laravel example 创建新项目2.cd example 进入项目3. npm install 安装前端依赖库4.创建laravel 视图文件 在resources/views目录下新建index.blade.php模板文件，与vue交互<!DOCTYPE html>
...
laravel项目搭建初步配置——（Laravel+Vue+Element-ui+Vux环境）
jhope的专栏
03-18
330
laravel项目搭建初步配置——（Laravel+Vue+Element-ui+Vux环境）
2018年08月01日 16:59:15止喜阅读数：967
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38125058/article/details/81334010
源码地址：laravel项目基础框架搭建
所需工具：co...
基于vue-element-admin的后台权限验证系统
06-29
<p>
</p>
<p style="font-size:11pt;color:#494949;">
<strong>本课程是基于vue-element-admin实现的后台权限验证系统，解决在前后端分离场景下如何实现前端与后端的动态权限，同时还会讲解基于laravel7.x的restful api接口的开发以及如何在脚手架中进行封装调用</strong>
</p>
<p style="font-size:11pt;color:#494949;">
<strong>对于前后端将要讲解的知识，分别列举如下：</strong>
</p>
<p style="font-size:11pt;color:#494949;">
<strong>前端</strong>：
</p>
<p style="font-size:11pt;color:#494949;">
1、学习如何使用后台集成框架vue-element-admin进行后台前端框架的搭建
</p>
<p style="font-size:11pt;color:#494949;">
</p>
<p style="font-size:11pt;color:#494949;">
2、学习如何在vue-element-admin中使用element-ui组件，学习到iconfont图标库的使用方法，学习到后台通用列表页面的制作方式
</p>
<p style="font-size:11pt;color:#494949;">
</p>
<p style="font-size:11pt;color:#494949;">
3、学习如何在前后端分离下，实现前端菜单的动态权限，如何进行请求的统一拦截
</p>
<p style="font-size:11pt;color:#494949;">
</p>
<p style="font-size:11pt;color:#494949;">
4、学习到前端项目的前后端联调，打包上线，如何在服务器层解决前后端分离引起的跨域问题
</p>
<p style="font-size:11pt;color:#494949;">
</p>
<p style="font-size:11pt;color:#494949;">
5、学习如何借助linux脚本实现代码自动上线部署
</p>
<p style="font-size:11pt;color:#494949;">
<strong>后端：</strong>
</p>
<p style="font-size:11pt;color:#494949;">
1、如何使用laravel编写restful api接口
</p>
<p style="font-size:11pt;color:#494949;">
</p>
<p style="font-size:11pt;color:#494949;">
2、如何使用composer进行项目依赖管理，laravel常用扩展的安装与使用，如dingo/api 以及repository
</p>
<p style="font-size:11pt;color:#494949;">
</p>
<p style="font-size:11pt;color:#494949;">
3、如何使用jwt进行实现后台用户认证机制
</p>
<p style="font-size:11pt;color:#494949;">
</p>
<p style="font-size:11pt;color:#494949;">
4、使用laravel扩展包的形式进行后台权限验证开发
</p>
<p style="font-size:11pt;color:#494949;">
</p>
<p style="font-size:11pt;color:#494949;">
5、如何编写Seeders帮助我们在新系统里实现管理员的初始化
</p>
<p style="font-size:11pt;color:#494949;">
</p>
<p style="font-size:11pt;color:#494949;">
6、如何使用git进行项目代码管理与部署
</p>
<p style="font-size:11pt;color:#494949;">
</p>
laravel 使用vue并引入element-ui
weixin_44720320的博客
10-08
596
// 引入 laravel/ui
composer require laravel/ui
// 初始化 vue
php artisan ui vue
// 然后执行
npm install
之后会生成一个vue组件的示例
在 welcome.blade.php 中引入
引入 element-ui
效果
laravel-admin:基于laravel + vue + element ui的后台管理系统，自带权限管理系统
03-11
Laravel-Admin简介
Laravel-Admin是用laravel + elementUi前端框架前首先分离写入成的后台脚手架，自带用户组权限系统。
安装
作曲家安装
配置nginx本地域名local.admin.com（如需更换域名，需要在webpack.mix.js替换配置域名）指向/ public目录
npm安装
导入/laravel-admin.sql数据库
将.env.example重命名为.env后修改数据库配置文件
npm run dev
使用
默认两个后台管理测试账号god / 123456，test / 123456
npm run watch可在开发时运行，实时兼控前端文件修改npm run prod生产环境打包
注意
设置新的权限后需要重新登录才会生效。
本项目标准严格测试，可能存在错误，值得参考学习。
如果感觉此项目帮助了您，请给颗星支持一下。
预览
Laravel+vue+element-ui上传图片
鱼儿锅头的博客
12-25
489
Laravel+vue+element-ui上传图片
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
新的改变
我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：
全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进
网站PHP框架之Laravel5.5(八)数据不转义视图传参
Galois的博客
07-10
863
做个小测试，先写一句路由：
Route::get('/',function (){
$name = '<span style="color:red>www</span>';
return view('books.index')->with([
'website' => 'gamacode.com',
'name...
Laravel5.5+Vue+Element-ui+Vux 环境搭建
热门推荐
为了、梦想
09-28
1万+
新手初次搭建这个环境有点困难，可能会遇到很对问题，所以写一篇详细的搭建过程分享
本教程例子可到GitHub 上下载 Laravel5.5-Vue-Element-ui-Vux
1. compose和node的安装
这两个的安装网上教程多的是，大家可自行下载安装。
2. Laravel5.5 安装
首先进入项目搭建目录，在控制台中输入
composer global ...
laravel5.7+vue+element-ui配置及简单使用
哈哈哈
01-30
2477
安装laravel5.7框架
打开终端，输入以下命令
composer create-project laravel/laravel element-ui
这里因为我在上一篇文章中已经新建了一个Nested Set项目，所以我就不再新建了，直接拿来用，有不明白的参考上一篇文章！
安装npm包
cnpm install //我一般...
Laravel+vue+element-ui 实现简单分页
鱼儿锅头的博客
12-25
303
简单记录一下分页操作
element-ui组件
<!--分页-->
<el-pagination
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
:total="this.total"
@current-change="list"
:current-page="currentPage"
</el-pagination>
js代码
Laravel6.0 + vue.js + elementUI + 微信小程序 实现沃尔玛扫码购
huangdj321的博客
05-27
1293
本次项目使用 Laravel6.0 + vue.js + elementUI + 微信小程序 实现沃尔玛扫码购
项目设计—接口
本次项目所有接口使用 laravel 框架实现。
项目设计—后台
后台开发使用 laravel 集成 elementUI 模式，页面套用 elementUI 自带样式。
后台模块有：
1、实现后台登录，对接到前端 vue 页面
2、购物袋管理：基本的增删改查，使用模态框实现
3、上传图片：单独建一张表，用来存储所有图片，两种方法实现上传：
使用插件，上传到七牛 (购物袋模块)
Laravel + vue + Element UI 后台脚手脚自带权限管理
zengfanweiboy的博客
01-25
3131
Laravel-Admin 是用 laravel + ElementUi前端框架前后端分离写成的后台脚手架，自带用户组权限系统。支持后台菜单二级分类
具体使用方法见项目github 地址：https://github.com/jack15083/laravel-admin
...
基于Vue+Element-ui+Laravel的牙齿矫治器定制厂家网站
画船吹风听雨眠
07-07
475
BlueTooth 蓝牙医疗-后台管理
项目简介
本项目的应用场景是某牙齿矫治器定制厂家的网站，其功能目的是提供牙医与厂家的交互平台，网站涉及三个角色：游客、牙医、专家(网站管理员)。
根据需求，专家和网站管理员的功能具有高度相似性,因此就放在一起了
技术选型：前端基于 vue 和 element-ui，后端基于php框架laravel，如果想对本项目进行扩展，你需要先学习使用这几门技术。
后端项目传送门
项目分为前台和后台两个部分，由于时间原因，重点放在后台的制作，系统的功能...
在Vue3项目中使用Element-Ui
weixin_44514665的博客
04-18
2841
安装
npm install element-plus --save
使用
main.js文件移入:
Element-Ui 组件的按需引入可以阅读Element的官方文档
Vue3中文文档
搭建 Laravel +Vue + Element 框架
cong____cong的博客
02-17
1万+
Laravel 版本：5.7
Vue 版本：2.5
前提：在此之前我们已经搭建好了支持 Laravel 5.7 的框架，如果有不明白的地方可以参考往期文章
安装依赖
laravel中是自带vue的依赖的，执行
cnpm install //cnpm淘宝镜像，npm的速度比较慢，速度慢的请换源
安装完成后，项目中将会多一些文件
ExampleComponent.vue 是系统...
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：博客之星2021
设计师：Hiro_C
返回首页
搞前端的半夏
CSDN认证博客专家
CSDN认证企业博客
码龄7年
前端领域优质创作者
201
原创
2401
周排名
766
总排名
216万+
访问
等级
1万+
积分
2万+
粉丝
4958
获赞
2290
评论
5924
收藏
私信
关注
热门文章
[评论送书 ]手撕源码，实现一个Koa。
57085
for of 和 for in 的区别
41698
使用Vue3学习Vue的基础知识
31991
root + vm vh 实现响应式字体
26175
学透CSS-如何组织你的CSS代码
24429
分类专栏
精通CSS
付费
48篇
21天精通TypeScript
付费
7篇
进阶吧！JavaScript
付费
9篇
Vue+Express课程管理项目实战
付费
4篇
JavaScript三步走
零基础学JavaScript
10篇
优质外文翻译
7篇
数据库
1篇
前端网站模板（毕设，外包，自学）
25篇
CSS实战100+例
1篇
Javascript小技巧
1篇
Electron从入门到精通
5篇
Webpack
1篇
Promise源码解密
5篇
各类框架/插件集合
5篇
VUE3
6篇
DevOps
3篇
CS考研
4篇
Django
2篇
vue
8篇
vuex
8篇
最新评论
CSS :not()选择器 (反选伪类)
不吃西红柿丶:
[code=ruby]又学到一招，感谢博主[/code]
CSS 父选择器 :has()
不吃西红柿丶:
[code=ruby]谢谢分享，一起加油！[/code]
vue+electron 打包后刷新，页面空白
亱_null:
有用，使用hash路由
23-职位分类展示平台响应式网页模板{HTML JS CSS）
不吃西红柿丶:
[code=ruby]文章主题明确，深深的打动人心，引发共鸣[/code]
取代前端er？PyScript到底是何方神圣
比奇堡天才选手:
你好，关于pyscript的依赖包，怎样动态引入呀
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
CSS :not()选择器 (反选伪类)
CSS 父选择器 :has()
26-时尚精品服饰网店响应式网页模板 （HTML css JavaScript）
2022
12月
3篇
11月
2篇
08月
3篇
07月
7篇
06月
7篇
05月
23篇
04月
15篇
03月
7篇
02月
5篇
01月
3篇
2021年74篇
2020年7篇
2019年33篇
2018年19篇
2017年1篇
目录
目录
分类专栏
精通CSS
付费
48篇
21天精通TypeScript
付费
7篇
进阶吧！JavaScript
付费
9篇
Vue+Express课程管理项目实战
付费
4篇
JavaScript三步走
零基础学JavaScript
10篇
优质外文翻译
7篇
数据库
1篇
前端网站模板（毕设，外包，自学）
25篇
CSS实战100+例
1篇
Javascript小技巧
1篇
Electron从入门到精通
5篇
Webpack
1篇
Promise源码解密
5篇
各类框架/插件集合
5篇
VUE3
6篇
DevOps
3篇
CS考研
4篇
Django
2篇
vue
8篇
vuex
8篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
搞前端的半夏
你的打赏，我的动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值