上篇介绍了vue,以及在如何 Laravel 快速搭建vue环境。
这篇讲如何在 Laravel 中更深入使用Vue。
预处理
vue还支持使用预处理工具，比如jade, sass等等。假设使用Stylus, Jade，那就npm install 一下呗
npm install stylus jade --save-dev
然后在vue文件中指定，你使用的预处理工具是什么
<template lang='jade'>.hello h1 Hello Vue</template><style lang="stylus" scoped>.hello width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;</style><script>export default { el() { return '#app' }, data() { return { } }, computed:{ }, ready() { }, methods: { }, events: { }, components: { }}</script> Components
Vue允许我们做模块化封装，以一个Alert模块为例，这个模块的功能是弹出提示，然后用户可以手动关闭，程序员可以设置样式，内容等等。目录划分，增加多一个components 的文件夹来存放模块，它跟views下的vue文件区别在于，它们是在多个页面呈现，或者是可以独立完成业务逻辑的可复用模块，而views 下是一个Vue实例的入口。
.├── components│ └── alert.vue├── entries│ └── hello.js└── views └── Hello.vue
引入子模块
<template lang='jade'>.wrapper alert() | Hello Vue alert(type='error') | Danger alert(type='success') | Login Success</template><style lang="stylus" scoped></style><script>import Alert from '../components/alert.vue'export default { el() { return '#app' }, data() { return { } }, computed:{ }, ready() { }, methods: { }, events: { }, components: { Alert }}</script> Alert 模块的具体实现
<template lang="jade">.alert-area(v-if='show') .alert(:class='typeClass') span(class='alert-close', @click='show=false') x i.fa.fa-info-circle.alert-icon(style='font-size: 16px;line-height: 20px;') .alert-text slot()</template><script>export default { props: { type: { default: 'info' }, show: { type: Boolean, default: true }, }, computed:{ typeClass() { return 'alert-' + this.type; } }}</script><style lang="stylus" scoped>.alert padding: 10px; &-area margin-bottom: 10px; &-icon width: 20px; display: inline-block; float: left; &-close cursor: pointer; float: right; &-text word-break: break-all; margin-left: 20px; margin-right: 10px; &-info background: #c7e0f2; color: #0082d5; border: 1px solid #0082d5; &-success background: #8AC48A; &-error background: red; color: white;</style>
页面效果是这样的：
点击x可以关闭它。
Vue CDN
你可能会发现，使用上面一波操作之后，我们只产出一个js文件，这个文件的体积（未经过压缩）已经达到了2、300KB，这显然是不合常理的。原因是browserify把 整个vue也产出到js文件中。但其实 vue.js 我们并不需要改动到。我们可以将它抽出来，使用cdn。
可以使用 browserify-shim 来完成这件事。
npm install browserify-shim --save-dev
修改 package.json
"browserify": { "transform": [ "vueify", "browserify-shim" ]},"browserify-shim": { "vue": "global:Vue"} 修改 blade 文件,引入cdn
<html> <head> <title>Laravel</title> <script src="//cdn.bootcss.com/vue/1.0.24/vue.min.js"></script> </head> <body> <div id='app'> </div> <script src="js/hello.js" charset="utf-8"></script> </body></html>
之前是直接整个vue文件压入，现在替换成一条语句，文件大小13KB
var _vue = (typeof window !== "undefined" ? window['Vue'] : typeof global !== "undefined" ? global['Vue'] : null);
TheEnd
我把Laravel项目中相关 源代码 都提交到github 了，需要的同学自行查阅。
超越炒作：评估当今PHP的角色Apr 12, 2025 am 12:17 AMPHP在现代编程中仍然是一个强大且广泛使用的工具，尤其在web开发领域。1)PHP易用且与数据库集成无缝，是许多开发者的首选。2)它支持动态内容生成和面向对象编程，适合快速创建和维护网站。3)PHP的性能可以通过缓存和优化数据库查询来提升，其广泛的社区和丰富生态系统使其在当今技术栈中仍具重要地位。
PHP中的弱参考是什么？什么时候有用？Apr 12, 2025 am 12:13 AM在PHP中，弱引用是通过WeakReference类实现的，不会阻止垃圾回收器回收对象。弱引用适用于缓存系统和事件监听器等场景，需注意其不能保证对象存活，且垃圾回收可能延迟。
解释PHP中的__ Invoke Magic方法。Apr 12, 2025 am 12:07 AM\_\_invoke方法允许对象像函数一样被调用。1.定义\_\_invoke方法使对象可被调用。2.使用$obj(...)语法时，PHP会执行\_\_invoke方法。3.适用于日志记录和计算器等场景，提高代码灵活性和可读性。
解释PHP 8.1中的纤维以进行并发。Apr 12, 2025 am 12:05 AMFibers在PHP8.1中引入，提升了并发处理能力。1)Fibers是一种轻量级的并发模型，类似于协程。2)它们允许开发者手动控制任务的执行流，适合处理I/O密集型任务。3)使用Fibers可以编写更高效、响应性更强的代码。
PHP社区：资源，支持和发展Apr 12, 2025 am 12:04 AMPHP社区提供了丰富的资源和支持，帮助开发者成长。1)资源包括官方文档、教程、博客和开源项目如Laravel和Symfony。2)支持可以通过StackOverflow、Reddit和Slack频道获得。3)开发动态可以通过关注RFC了解。4)融入社区可以通过积极参与、贡献代码和学习分享来实现。
PHP与Python：了解差异Apr 11, 2025 am 12:15 AMPHP和Python各有优势，选择应基于项目需求。1.PHP适合web开发，语法简单，执行效率高。2.Python适用于数据科学和机器学习，语法简洁，库丰富。
php：死亡还是简单地适应？Apr 11, 2025 am 12:13 AMPHP不是在消亡，而是在不断适应和进化。1)PHP从1994年起经历多次版本迭代，适应新技术趋势。2)目前广泛应用于电子商务、内容管理系统等领域。3)PHP8引入JIT编译器等功能，提升性能和现代化。4)使用OPcache和遵循PSR-12标准可优化性能和代码质量。
PHP的未来：改编和创新Apr 11, 2025 am 12:01 AMPHP的未来将通过适应新技术趋势和引入创新特性来实现：1)适应云计算、容器化和微服务架构，支持Docker和Kubernetes；2)引入JIT编译器和枚举类型，提升性能和数据处理效率；3)持续优化性能和推广最佳实践。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
Dreamweaver Mac版
视觉化网页开发工具
螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。
适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
