Vue单页应用开发流程 (Laravel + Vue + Laravel-mix)_wange21的博客-CSDN博客
Vue单页应用开发流程 (Laravel + Vue + Laravel-mix)
wange21
于 2017-08-07 17:22:48 发布
12566
收藏
分类专栏：
javascript
vue-js
文章标签：
vue-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21895079/article/details/76853884
版权
javascript
同时被 2 个专栏收录
3 篇文章
0 订阅
订阅专栏
vue-js
2 篇文章
0 订阅
订阅专栏
今天来介绍一下如何用Vue开发单页应用。
开发环境 ：
Laravel : 5.4
Vue : 2.1.10
vue-router: 2.7.0
1.准备
本篇文章默认你已经安装过Laravel,node,npm
运行npm install即可安装laravel-mix。如果失败的话请使用npm国内镜像。
之后通过 cnpm install --save vue-router 安装vue-router。（关于npm的找时间写一篇文章吧）
2.项目结构
Laravel的文件结构就不再多讲，这里讲一下跟Vue有关的几个地方。
resources\views
这个目录是 laravel的视图目录，Vue开发中这里只有一个文件，作为入口文件。
routes\web.php
这个文件是Laravel的路由文件，Vue开发中用一句指向入口文件
Route::get('/', function () {
return view('welcome');
});
webpack.mix.js
这个文件是laravel-mix的配置文件，具体说明参照官方文档 [ Laravel 5.4 文档 ] 前端 —— 编译资源（Laravel Mix）。
resources\assets
这个目录下存放的是项目资源文件如js，css等。开发环境中的js和css代码放在这里。
/js
这个目录js的源码目录，Vue的代码都放在这里。
/components
这个目录下存放的是Vue单文件组件。
\bootstrap.js
所有的js依赖都写在这个文件里。
\app.js
这个文件是Vue的入口文件。
3.第一个Vue应用
运行mix
运行npm run watch即可运行mix
初始安装的laravel中 webpack.mix.js 有以下代码。
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
运行mix后会将代码编译后放在指定目录下。
编写入口文件
将 resources\views\welcome.blade.php 替换成如下代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<link href="/css/app.css" rel="stylesheet">
</head>
<body>
<div id="app">
<example></example>
</div>
</body>
<script src="/js/app.js"></script>
</html>
如果看到下面这样则说明运行成功
4.构建单页应用
首先在 resources\assets\js\app.js 中加入window.VueRouter = require("vue-router");引入vue-router
单文件组件
编写单文件组件（具体参照vue官方文档），之后通过Vue.component('example', require('./components/Example.vue'));注册组件。注册完主键后就可以在HTML中以<example></example>形式显示组件。
路由
通过下面的方式定义路由
const routes = [
{ path: '/', component: {template :"<home></home>"} },
{ path: '/archives‘, component: { template: '<archives></archives>' } },
];
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
});
const app = new Vue({
router
}).$mount('#app');
之后在需要切换的HTML中加入<router-view></router-view>即可，之后就可以通过改变url来部分刷新，实现单页应用。
具体流程(代码基于第3步)
先编写一个页面框架组件 view.vue
<template>
<div class="row clearfix">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<div class="col-md-12 column content">
<div class="col-md-7 col-md-offset-1 column">
<router-view></router-view>
</div>
</div>
</div>
</template>
在app.js中注册Vue.component('my-view', require('./components/view.vue'));，并定义路由
const routes = [
{ path: '/', component: {template :"<home></home>"} }
];
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
});
const app = new Vue({
router
}).$mount('#app');
在入口文件welcome.blade.php中修改为以下代码：
<div id="app">
<my-view></my-view>
</div>
之后编写第二个组件。
这里就直接用原来的example好了。
更改app.js
const routes = [
{ path: '/'example', component: {template :"<example></example>"} }
];
这样在url中输入localhost/#/example 就能看到效果。
总结
在app.js中注册组件，编写路由。由.vue 文件编写组件。通过<router-view></router-view>来通过url显示不同的视图。
下次再写Vue的大概是关于组件的一些东西。然而，并不知道要什么时候
wange21
关注
关注
点赞
收藏
打赏
评论
Vue单页应用开发流程 (Laravel + Vue + Laravel-mix)
今天来介绍一下如何用Vue开发单页应用。开发环境 ：Laravel : 5.4 Vue : 2.1.10vue-router: 2.7.01.准备本篇文章默认你已经安装过Laravel,node,npm运行npm install即可安装laravel-mix。如果失败的话请使用npm国内镜像。之后通过 cnpm install --save vue-router 安装vue-router。（关于np
复制链接
扫一扫
专栏目录
laravle-mix非框架使用vue示例
07-14
laravle-mix非框架使用vue示例
laravel-mix-vue3:适用于Vue 3，Typescript和JSX的Laravel Mix扩展
05-28
Laravel Mix v5-Vue 3
适用于Vue 3，Typescript和JSX的Laravel Mix扩展。
不推荐使用
用法
首先，安装扩展程序。
npm install laravel-mix-vue3 --save-dev
//or
yarn add laravel-mix-vue3 -D
如果Laravel Mix无法安装以下内容，请确保安装以下内容
npm install @types/webpack-env @vue/compiler-sfc vue-loader@next laravel-mix-vue3 --save-dev
// or
yarn add @types/webpack-env @vue/compiler-sfc vue-loader@next laravel-mix-vue3 -D
然后，在您的webpack.mix.js文件中要求它，
参与评论
您还未登录，请先
登录
后发表或查看评论
Vue脚手架安装、创建与运行
wsxokn945的博客
10-12
97
是一个专门为单页面（SPA）应用快速搭建繁杂的脚手架，它是基于webpack的基础开发出来的一款能够快速的帮助我们构建一个用来开发vue的项目目录、结构（vue和webpack的项目模板）。vue脚手架基于node的环境：创建复杂vue项目的模板。
vue+laravel前后端分离项目中使用laravel-echo
最新发布
小幺的博客
10-24
776
利用laravel的 laravel-echo 与 vue前后端分离交互（socket通信）案例
laravel-mix-vue-css-modules:Laravel Mix Vue CSS模块
05-12
Laravel Mix Vue CSS模块
添加对CSS模块laravel mix的支持。
安装
npm i laravel-mix-vue-css-modules --save-dev
推荐的v3
Laravel混合
Laravel Mix Vue CSS模块
预处理器
安装命令
v5
v2
SCSS
npm install laravel-mix-vue-css-modules@2
v5
SCSS，LESS，STYLUS
npm install laravel-mix-vue-css-modules@3
用法
首先，必须启用VueCssModules。 您的webpack.mix.js可能如下所示：
const mix = require ( "laravel-mix" ) ;
require ( "laravel-mix-vue-css-modules" ) ;
mi
Lumen-mix-vue:Lumen 5.5 与 laravel-mix 和 vueJS
05-30
流明PHP框架
Laravel Lumen 是一个速度惊人的 PHP 微框架，用于构建具有表现力、优雅语法的 Web 应用程序。 我们相信发展必须是一种令人愉快的、创造性的体验，才能真正实现。 Lumen 试图通过简化大多数 Web 项目中使用的常见任务（例如路由、数据库抽象、排队和缓存）来减轻开发过程中的痛苦。
官方文档
该框架的文档可以在上找到。
安全漏洞
如果您发现 Lumen 中存在安全漏洞，请发送电子邮件至 taylor@laravel.com 给 Taylor 。 所有安全漏洞都将得到及时解决。
执照
Lumen 框架是在许可下的开源软件
教程：
1.首先，安装Lumen 5.5。*：
composer create-project --prefer-dist laravel/lumen example "5.5.*"
注意阅读官方安装 。
2.使用 NPM 安装
vue接口Vue.use( plugin )/myMixin、computed、watch
w96098的博客
04-15
100
Vue.use( plugin )
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
// ...组件选项
})
----------------------------
const MyPlugin = {};
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
SpringCloud微服务架构前后端分离项目实践
weixin_50196917的博客
06-07
2949
一款 Java 语言基于 SpringCloud、Vue、ElementUI、MySQL等框架精心打造的一款前后端分离框架，致力于实现模块化、组件化、可插拔的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，前端Vue端支持多主题切换，可以根据自己喜欢的风格选择想一个的主题的个性化呈现的需
基于laravel及layui开发的后台管理系统 -- laravel-wjfcms
臭大佬的CSDN
09-03
1314
前言
本人小菜鸡一枚，工作之余自己琢磨着开发一套自己的博客系统，仰仗于laravel的强大，经过一段时间的折腾，开发了这套CMS，用于写写博客，然后呢，接到外包的时候，用它撸也是方便了很多，大大提升了开发效率。
代码写的不是很好，大神勿喷，如果有错误或者有优化方案,希望大神们给小弟补补课,我很乐意接受批评和建议，我的联系方式在最下面。希望大家一起交流一起进步。
代码地址
github地址：laravel-wjfcms （欢迎 star 与 fork）
文档地址
https://www.choudalao.c
laravel-mix：webpack的力量，为我们其他人提炼
02-03
介绍
Laravel Mix提供了一个干净，流畅的API，用于为您的应用程序定义基本的构建步骤。 Mix支持几种常见CSS和JavaScript预处理器。
如果您对如何开始使用模块捆绑和资产编译感到困惑，那么您会喜欢Laravel Mix！
文献资料
您可以在查看初始文档。
执照
Laravel Mix是根据的开源软件。
php laravel mix,Laravel框架 之 Mix
weixin_34277895的博客
03-28
150
本文的示例代码参考mix-basic目录Composercomposer create-project laravel/laravel mix-basic --prefer-dist "5.5.*"cd mix-basicAuthdocker run --name laravel-mix -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7...
基于Laravel的国产开源CMS，支持Swoole，含API接口
yinyueboke的博客
11-29
141
项目介绍
MyCms是一款基于Laravel开发的开源免费的自媒体博客CMS系统，适用于个人网站及企业网站开发使用，软件著作权编号：2021SR1543432。MyCms基于Apache2.0开源协议发布，免费且不限制商业使用，欢迎持续关注我们。
技术交流QQ群：887522124 加群请备注来源：如gitee、github、官网等。
站点地址
官方网站
使用手册
API文档
源码下载
演示前台 / 演示后台
演示后台：admin / admin
优秀案例
在线计算网
程序员导航
古诗词网
系统功.
记一次laravel-mix vue-router import 排坑
08-08
191
laravel+vue优化vue单文件过大 app.js过大
yhy1315的博客
08-18
5142
博主最近在写laravel+vue+element的一个项目,因为不是很了解webpack所以踩了不少坑，其中就有vue单文件过大问题，于是在这里记录下解决方法。
主要思路是分为两点。
减少webpack打包体积，将不用修改的库用cdn引入。
使用vue-router路由懒加载
1.cdn引入
cdn引入不需要修改app.js
现在我们来写一下，使得我们可以从外部引入而不...
单页应用和多页应用的区别
越努力，越幸运！
09-28
3204
一、定义区分
【1.1】单页应用
单页应用又称 SPA（Single Page Application）指的是使用单个 HTML 完成多个页面切换和功能的应用。这些应用只有一个 html 文件作为入口，一开始只需加载一次 js,css 等相关资源。使用 js 完成页面的布局和渲染。页面展示和功能室根据路由完成的。单页应用跳转，就是切换相关组件，仅刷新局部资源。
【1.2】多页应用
多页应用又称 MPA（Multi Page Application）指有多个独立的页面的应用，每个页面必须重复加载 js
Laravel5.5 + Vue2 + Element 环境搭建
热门推荐
潜心做事的博客
09-18
1万+
更新说明
2018 年 1 月 25 日更新
开始写这篇文章时，Element 的版本还是 1.4，现在已经来到 2.0 了，有些步骤需要修改，特此说明。
第 9 步，修改 Hello.vue 文件，使用 Element 组件 中
el-dialog v-model="visible">
修改为
:visible.sync="visible">
第 8 步，引入 Elem
php scss vue.js,laravel mix 和前端资源的整合，比如sass和vuejs
weixin_35626107的博客
03-29
115
在安装好laravel mix后，我们就可以使用laravel mix来整合前端资源了。https://laravel-china.org/docs/5.4/frontend运行npm run watch后，改动sass或vue文件后，会自动编译生效。------------关于vuejs:全新安装的 Laravel 程序默认会在 resources/assets/js/components 中包...
moell/mojito - 基于Laravel、Vue、ELement 构建的基础后台系统扩展
10-09
250
Mojito
Mojito 是一个基于 Laravel, Vue, Element构建的后台管理系统。
截图
获取地址
https://github.com/moell-peng/mojito 欢迎使用和star
特征
可快速衍生多个后台系统
内置角色，权限，用户，菜单管理
OAuth 2...
Laravel 完整开源项目大全
牛仔驿站的博客
06-12
444
原型项目
Laravel 5 Boilerplate——基于当前Laravel最新版本（Laravel 6.0）并集成Boilerplate的项目
Laravel 5 Angular Material Starter——这是一个 Laravel 和 AngularJS 的原型项目（最高支持版本：5.3，长期未更新）
Someline Starter—— 基于 Laravel 5 和 Vue.js，用于快速构架 RESTful API 和 Web 应用的原型项目（最高支持版本：5.8）
El...
将Laravel Mix与webpack一起用于所有资产
culiu9261的博客
07-22
839
Laravel Mix provides a fluent API for defining webpack build steps for your application using several common CSS and JavaScript pre-processors.
Laravel Mix提供了一种流畅的API，可使用几种常见CSS和JavaScript预处理程序为您的应用程...
laravel + vue 创建后台+开始到结束
qq_26282869的博客
03-11
4610
搭建过程
注意:这里要去报你本地已经安装好了composer
1.新建 Laravel5.5 项目
在 Web 服务器目录下，使用 Composer 建立laravel新项目
composer create-project --prefer-dist laravel/laravel Larvuent // 新项目名为 Larvuent
Larvuent 安装完成后，执行
cd Larvuent...
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：大白
设计师：CSDN官方博客
返回首页
wange21
CSDN认证博客专家
CSDN认证企业博客
码龄8年
暂无认证
10
原创
48万+
周排名
183万+
总排名
2万+
访问
等级
291
积分
粉丝
获赞
评论
收藏
私信
关注
热门文章
Vue单页应用开发流程 (Laravel + Vue + Laravel-mix)
12566
标签云的实现(使用jQuery插件jqcloud)
5565
Linux下的Laravel项目配置
1098
[leetcode] 885. 救生艇
989
[LeetCode] 916. 单词子集
362
分类专栏
javascript
3篇
vue-js
2篇
php
2篇
python
4篇
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
[LeetCode] 999. 车的可用捕获量
[LeetCode] 916. 单词子集
[LeetCode] 763. 划分字母区间
2019年1篇
2018年6篇
2017年3篇
目录
目录
分类专栏
javascript
3篇
vue-js
2篇
php
2篇
python
4篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
wange21
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值