Laravel5.5 + Vue2 + Element 环境搭建_laravel vue2 webpack-CSDN博客
Laravel5.5 + Vue2 + Element 环境搭建
最新推荐文章于 2023-10-26 09:32:11 发布
潜心做事GG 阅读量1.9w 收藏 18 点赞数 6 分类专栏： PHP JavaScript 文章标签： 前端 laravel vue element
版权声明：本文为博主原创文章，遵循
CC 4.0 BY-SA
版权协议，转载请附上原文出处链接和本声明。
本文链接：
https://blog.csdn.net/mrzhouxiaofei/article/details/78015473
版权
同时被 2 个专栏收录
7 篇文章
0 订阅
订阅专栏
4 篇文章
更新说明
2018 年 1 月 25 日更新
开始写这篇文章时，Element 的版本还是 1.4，现在已经来到 2.0 了，有些步骤需要修改，特此说明。
第 9 步，
修改 Hello.vue 文件，使用 Element 组件
<
el
-dialog
-model
=
"visible"
>
修改为
<el-dialog
:visible
.sync=
第 8 步，
引入 Element
中，使用命令
npm i element
-ui
-S
默认安装的 Element 是 2.0 版本，2.0 版本的主题文件夹，由 theme-default 改为了 theme-chalk，所以下面
修改 resources/assets/js/app.js 文件
import
'element-ui/lib/theme-default/index.css'
要改成
'element-ui/lib/theme-chalk/index.css'
当然，如果你想继续使用 1.4 版本的 Element 也是可以的，使用命令
npm
i element-ui
@legacy
安装的即是 1.4 版，自然的，主题文件夹也不需要修改了。
搭建说明
同类的教程网上也有不少，本文不是为了重复造轮子，只是在 Laravel5.5 LTS 推出之际，重新记录自己的搭建过程，避免以后再次踩坑。
网上的许多教程都是基于 Laravel5 系列的不同版本，虽然大致过程都差不多，但是对于前端编译工具不甚了解的人来说，官方推荐的前端编译工具的改变也着实容易让人迷糊。
为了便于理解，本文初次搭建时，尽量简单，能运行即可，关于前端编译工具，Vue 路由等等，后面再说。
本文全部代码，可以到 github 上获取：
https://github.com/mrzhouxiaofei/Larvuent
搭建过程
1.新建 Laravel5.5 项目
在 Web 服务器目录下，使用 Composer 建立新项目
composer create
-project
--
prefer
-dist
laravel/laravel Larvuent
// 新项目名为 Larvuent
Larvuent 安装完成后，执行
cd
Larvuent
说明：建议配置虚拟主机
2.安装前端依赖库
进入 Larvuent 项目后，执行
npm 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, Larvuent!
</
class
"hello"
{ msg }}
template
script
export
default
data() {
msg:
'This is a Laravel with Vue and Element Demo.'
style
.hello
font-size
em
color
green
5.修改 app.js 文件，渲染组件
resources/assets/js/app.js
文件
require
'./bootstrap'
window.Vue =
'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 了。
6.新建 Laravel 视图文件，和 Vue 交互
resources/views
目录下新建 index.blade.php 文件
<!doctype html>
html
lang
"en"
head
meta
charset
"UTF-8"
title
body
id
"app"
src
"{
{ mix('js/app.js') }}"
说明：你可能在其他教程中看到有的在使用 assets 函数，这两个函数的主要区别就是 assets 函数会直接使用所填路径去 public 文件夹下找文件，而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新相关的，如果现在还不明白，不要紧，你记得使用 mix 函数就好了，然后继续往后看。
7.编译前端组件，运行
执行以下命令，编译前端资源
run dev
该命令默认会去执行根目录下的 webpack.mix.js 文件，使用 Laravel 提供的 Laravel Mix 编译资源，并将编译好的资源放在根目录 public 文件夹下。
说明：前端编译工具有许多，比如 gulp、webpack 等等，Laravel 也为自己提供了开箱即用的编译工具，比如 Laravel5.3 及更早版本提供基于 gulp 的 Laravel Elixir 和从 Laravel5.4 开始提供基于 webpack 的 Laravel Mix，当然你也可以不使用官方提供的工具，自己去配置编译工具。这些编译工具的作用都是一样的，使用方法也大同小异。前面说过，本文第一次安装尽量简单，能运行即可，所以不再去配置前端编译工具，使用官方提供的即可。
访问项目
到目前为止，Laravel + Vue 已经完成了，下面开始引入 Element。
8.引入 Element
执行命令，安装 ElementUI
import ElementUI from
'element-ui'
Vue.use(ElementUI);
9.修改 Hello.vue 文件，使用 Element 组件
resources/assets/js/components/Hello.vue
el-button
@
click
"visible = true"
按钮
el-dialog
v-model
欢迎使用 Element
visible:
false
10.再次编译前端资源，运行
执行
访问项目，点击按钮
好了，到目前为止，Laravel5.5 + Vue2 + Element 的环境搭建已经完成了，为了方便理解，第一次的搭建过程尽量简洁。本文下面的部分将使用 Vue 路由等等，逐步完善，便于后期的开发。
完善
CSRF 防护
环境搭建完成后，访问项目，打开开发者模式，切换到 Console ，会看到以下报错
Laravel 为了避免应用遭到跨站请求伪造攻击(CSRF)，自动为每一个有效用户会话生成一个 CSRF 令牌，该令牌用于验证授权用户和发起请求者是否是同一个人。
resources/views/index.blade.php
name
"csrf-token"
content
{ csrf_token() }}"
创建一个 meta 标签并将令牌保存到该 meta 标签中，问题可解决。
使用 Vue Router
构建大型项目时，使用 Vue Router 将是一个好的方式，它可以帮助你更好的组织代码，优化路由。
1.安装 vue-router
执行命令，安装 vue-router
npm install vue
-router
save
-dev
2.配置 vue-router
resources/assets/js
目录下新建目录 router ，同时在 router 目录下新建 index.js 文件
import Vue from
import VueRouter from
'vue-router'
Vue.use(VueRouter);
VueRouter({
saveScrollPosition:
true
routes: [
name:
'hello'
path:
'/hello'
component: resolve =>
void
([
'../components/Hello.vue'
], resolve))
3.引入 vue-router
目录下新建 App.vue 文件
Hello, {
{ msg }}!
router-view
<!--路由引入的组件将在这里被渲染-->
'Vue'
// import Hello from './components/Hello.vue';
import App from
'./App.vue'
import router from
'./router/index.js'
router,
render: h => h(App)
4.重新编译
通过路由访问 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([
'axios'
]);
extract 方法接收包含所有库的数组或你想要提取到 vendor.js 文件的模块，使用上述代码作为示例，Mix 将会生成如下文件：
public
/js/manifest.js
// Webpack manifest runtime
/js/vendor.js
// vendor 库
/js/app.js
// 应用代码
同时修改 resources/views/index.blade.php 文件为
{ mix('js/manifest.js') }}"
{ mix('js/vendor.js') }}"
全局的 mix 函数会根据 public/mix-manifest.json 中的路径去加载对应的文件，同时也要注意引入三个 js 文件的顺序，以避免出错。
重新执行命令，就可以了。
使用下面的命令，可以监视前端资源的改变，并自动编译。
run watch
总结
到目前为止，这篇文章也快写完了，为了便于理解，本文第一次搭建时，尽量简单，能运行即可，成功之后，再添加其它功能。前端编译工具使用基于 webpack 的 Laravel Mix，一般情况下，它可以满足大部分的需求，当然你也可以完全抛弃 Laravel Mix，配置自己的 webpack，后期如果有需求，可以再写一篇相关的文章。
如有疑问，欢迎回复交流。
优惠劵
关注
点赞
觉得还不错?
一键收藏
知道了
评论
更新说明2018 年 1 月 25 日更新开始写这篇文章时，Element 的版本还是 1.4，现在已经来到 2.0 了，有些步骤需要修改，特此说明。第 9 步，修改 Hello.vue 文件，使用 Element 组件 中el-dialog v-model="visible">修改为:visible.sync="visible">第 8 步，引入 Elem
复制链接
扫一扫
专栏目录
-in-
-starter:带有
Vue
2和
Element
Laravel
项目
04-01
中的元素
使用
5.7项目
用法
git clone https://github.com/
UI/
-starter.git <project>
cd <project>
composer install
cp .env.example .env
php artisan key:generate
php artisan serve (if not using
valet)
yarn OR npm install
yarn watch OR npm run watch
访问http://localhost:8000 ，它起作用了！
If using
valet, visit http://<project>.test
现在您就可以开始编码了！
搭建
框架
热门推荐
cong____cong的博客
02-17
1万+
版本：5.7
版本：2.5
前提：在此之前我们已经搭建好了支持
5.7 的框架，如果有不明白的地方可以参考往期文章
安装依赖
中是自带
的依赖的，执行
cnpm install //cnpm淘宝镜像，npm的速度比较慢，速度慢的请换源
安装完成后，项目中将会多一些文件
ExampleComponent.
是系统...
8 条评论
您还未登录，请先
登录
后发表或查看评论
9+
UI入门基础框架搭建
西里古里的博客
01-13
292
一款 PHP 语言基于
9、
UI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，为了敏捷快速开发，提升研发效率，框架内置了一键CRUD代码生成器，自定义了模块生成模板，包括后端PHP文件模块和
端个性化模板，可以根据已建好的表结构(字段注释需规范)快速的一键生成整个模块的所有代码和增删改查等等功能业务，真正实现了低代
项目使用
weixin_34179968的博客
12-02
256
2019独角兽企业重金招聘Python工程师标准>>>
...
2.0终于搞定了!
qq_36663951的博客
07-18
1532
开文废话:
是一个PHP框架,
是一个
MVVM轻量级开源框架.
为啥要组合它俩一起开发呢,除了好玩就是有挑战了?并不是的:
1:起手在慕课网看了
基础入门的就会发现,
解决了很多后台开发起来老大难的问题,模板引擎和路由机制还有很多开发服务:登录/注册验证,验证码,分页等等..
2:起手也在慕课网看了
基础也有很多先进的概念如:数据绑定+组件
中集成
.js 组件，使用
3进行全栈开发
最新发布
活下去,学下去
10-26
1579
.js 是 Web 开发中常用的两个强大的框架。
提供了全面的后端解决方案，而
.js 提供了灵活高效的方式来构建交互式
组件。尽管
为动态界面提供了 Inertia.js 和 Livewire 等替代选项，一般情况下的项目，都是采用前后端分离开发，
负责后端接口，
.js负责
页面，。本文讲解具体集成方法。
-mix在传统页面上使用
组件总结
五侠的博客
07-14
1145
组件起步自定义字体路径使用CDN自动更新资源版本号通用页面打包提取通用组件
-mix是
框架下
助手，方便使用
、react等。
功能强度大，目前仍在持续更新，这里使用最新
6.x，也就是长期支持版中的
-mix总结使用过程中遇到的问题及解决办法。以iview的UI库为例。
无论是否使用laravle框架都可以使用的。
起步
安装最新的node LTS，也就是node 14。
使用镜像：npm conf
开发配置
weixin_41631068的博客
03-10
1517
单页应用开发流程(
-mix)
开发环境：
: 5.4
: 2.1.10
-router: 2.7.0
1.准备
本篇文章默认你已经安装过
,node,npm
运行npm install即可安装
-mix。如果失败的话请使用npm国内镜像。
之后通过cnpm install...
1-
-ui创建项目
chencaw的专栏
05-11
1094
1、
create chen
demo
2、测试是否安装好
npm run serve
UI框架基本使用实践教程
01-18
225
5.4 +
+ vux +
的环境搭配过程介绍
10-18
主要给大家介绍了关于
的环境搭配的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
5.4+
简单搭建的示例代码
12-01
如今
来到5.4版本，更方便引入
了，具体步骤如下：
1.下载
5.4,这边是下载地址（里面的配置文件都写得差不多了）！
2.打开package.json
内容如下
"private": true,
"scripts": {
"dev": ...
pet:
5.5
.js+
-ui(宠物饲养管理平台)
05-30
项目架构:
2+
: 由于重心还是在后端，
代码和目录分层，直接借鉴（这里感谢他的开源项目） 后台: 后端架构: Controller : 控制器 Responses : 响应层 Routes : 路由(拆分处理) ...
中 Session 的使用问题
潜心做事的博客
01-11
9359
写这篇文章，是因为前段时间在
中使用 Session， 突然出现了很诡异的问题，找了好久才发现问题所在，特此记录一下。
HTTP 协议是无状态的协议，两个请求之间是没有任何关联的，为了让服务器保存用户的状态信息，所以引入了 Session 的概念。
中使用 Session 有两种方式，通过 Request 实例或者通过全局辅助函数，我一般使用全局辅助函数，像下面...
验证中的正则 regex
12-09
6614
的验证功能非常强大，基本上常见的需求都有对应的验证规则，对于一些的特殊的验证需求，
也提供了正则验证。正则验证之前也用过一次，今天再次使用时，发现不行了，又看了一下官方文档，才知道问题出在哪，特此记录下来。
CentOS 7 下解决服务器报 Redis server went away 的错误
01-28
5176
这两天在学习 Redis，因为 Redis 在 Windows 上的表现并不好，而且线上环境基本上都是 Linux，所以选择在 CentOS 7 上跑跑例子。在安装完 Redis 的 PHP 客户端 phpredis ，测试连接时，碰到这个问题，特此记录。
问题
开始在 Redis 上使用 redis-cli 跟着敲命令还没出现问题，后来需要使用 Redis 的 PHP 客户端 phpre
PHP实现邮件发送(PHPMailer+QQ邮箱)
03-27
5032
最近复习原生PHP，看到邮件函数这一部分，就试着写一下邮件功能，在网上搜了一下，主要有两种实现方式：
1.PHP自带的mail()函数
2.封装的smtp邮件发送类
下面来一一介绍PHP自带的mail()函数浏览一下文档，mail()函数的注释如下：
即若要使用mail()函数，需要本地安装一个邮件系统或者必须设置一台不需要中继的邮件发送服务器，但现在要找到一台
PHP 中 this self static 的区别
11-27
1024
引入最近在做软件工程的课程设计，碰到一个问题，去扒
源码，又搜索一番，发现是对 self static 的理解不深，才出现了问题，所以记录下来，避免再次犯同样的错误。
cesium +
环境搭建
09-03
Cesium是一个用于创建三维地球和地球数据可视化的开源JavaScript库。
是一个用于构建用户界面的渐进式JavaScript框架。在搭建Cesium和
2环境之前，确保你已经在电脑上安装好了Node.js和npm。
首先，我们需要创建一个新的
项目。打开终端或命令提示符，输入以下命令来创建一个新的
项目：
```
create cesium-
-demo
接下来，选择手动配置，然后按照默认设置一步一步进行配置。当配置工具询问你是否要选择预设配置或手动选择特性时，请选择手动选择。
然后，在第一项核心功能中选择了Babel、Router和
x，第二项选中了CSS Pre-processors，第三项不选择Linter/Formatter。
完成配置后，进入项目目录：
cd cesium-
然后，我们需要安装Cesium依赖。在终端中输入以下命令：
npm install cesium --save
安装完成后，我们需要修改
webpack
配置，以便正确加载Cesium依赖。打开`
.config.js`文件，输入以下内容：
```javascript
module.exports = {
// ...
configure
Webpack
: {
output: {
// 修改打包后静态文件的路径
publicPath: './'
},
amd: {
// 添加一个module文件的对外映射关系
toUrlUndefined: true
// 解决加载Cesium的路径问题
resolve: {
alias: {
cesium: path.resolve(__dirname, 'node_modules/cesium/Source')
// 设置全局变量
plugins: [
.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('./')
})
然后，我们需要在
组件中引入Cesium。在`App.
`文件中添加以下代码：
<div id="cesiumContainer"></div>
</template>
<script>
import * as Cesium from 'cesium'
export default {
mounted() {
const viewer = new Cesium.Viewer('cesiumContainer')
// 添加Cesium代码
</script>
最后，运行以下命令启动
现在，你已经成功搭建了一个Cesium和
2的环境。你可以在`App.
`中添加Cesium代码来创建三维地球和地球数据可视化应用。
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
CSDN认证博客专家
CSDN认证企业博客
码龄7年
暂无认证
25
原创
24万+
周排名
204万+
总排名
访问
等级
1681
积分
82
粉丝
333
获赞
77
795
私信
热门文章
MySQL 之全文索引
108378
谈谈唯一约束和唯一索引
36282
19852
PHP7开启OpenSSL扩展失败的解决办法(win10)
19456
CentOS 7 下编译安装 Linux 4.14 内核
13478
分类专栏
7篇
4篇
算法
工具
3篇
Linux
MySQL
5篇
效率
随笔
2篇
最新评论
我不会jvav:
5.8版本，(*)星号 通配符，我接在词前面也可以查出来
awsl1212:
你在扯什么淡啊，null数量都搞不明白
终末之诗EndPoem:
编译2个半小时有点久了，是不是配置比较低呀，我的i5-12400F（分配虚拟机8线程）只用了15分钟左右
微光 ら゛:
看的很舒服
晨矤梦曦:
修改我一开始还没看懂，，翻评论才发现，哈哈哈
大家在看
从0开始学习slam十四讲-ch2
318
【服务器部署篇】Jenkins配置后端工程自动化部署
免费！超过30语种的多语种语音识别+翻译工具一键包
20
通俗易懂说模型——RNN
568
去雾笔记01-SRKTDN: Applying Super Resolution Method to Dehazing Task
1266
最新文章
这个假期有点长
Laravel 中 Session 的使用问题
2018 这一年
2019年
2018年
11篇
2017年
13篇
目录
评论
被折叠的
条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额
3.43
前往充值 >
需支付：
10.00
取消
确定
下一步
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。
余额充值