在 Laravel 中使用vue（二）
上篇介绍了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 了，需要的同学自行查阅。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1390
52
Alipay PHP SDK transfer error: How to solve the problem of 'Cannot declare class SignData'?
Apr 01, 2025 am 07:21 AM
Alipay PHP...
Explain JSON Web Tokens (JWT) and their use case in PHP APIs.
Apr 05, 2025 am 12:04 AM
JWT is an open standard based on JSON, used to securely transmit information between parties, mainly for identity authentication and information exchange. 1. JWT consists of three parts: Header, Payload and Signature. 2. The working principle of JWT includes three steps: generating JWT, verifying JWT and parsing Payload. 3. When using JWT for authentication in PHP, JWT can be generated and verified, and user role and permission information can be included in advanced usage. 4. Common errors include signature verification failure, token expiration, and payload oversized. Debugging skills include using debugging tools and logging. 5. Performance optimization and best practices include using appropriate signature algorithms, setting validity periods reasonably,
How does session hijacking work and how can you mitigate it in PHP?
Apr 06, 2025 am 12:02 AM
Session hijacking can be achieved through the following steps: 1. Obtain the session ID, 2. Use the session ID, 3. Keep the session active. The methods to prevent session hijacking in PHP include: 1. Use the session_regenerate_id() function to regenerate the session ID, 2. Store session data through the database, 3. Ensure that all session data is transmitted through HTTPS.
Describe the SOLID principles and how they apply to PHP development.
Apr 03, 2025 am 12:04 AM
The application of SOLID principle in PHP development includes: 1. Single responsibility principle (SRP): Each class is responsible for only one function. 2. Open and close principle (OCP): Changes are achieved through extension rather than modification. 3. Lisch's Substitution Principle (LSP): Subclasses can replace base classes without affecting program accuracy. 4. Interface isolation principle (ISP): Use fine-grained interfaces to avoid dependencies and unused methods. 5. Dependency inversion principle (DIP): High and low-level modules rely on abstraction and are implemented through dependency injection.
How to automatically set permissions of unixsocket after system restart?
Mar 31, 2025 pm 11:54 PM
How to automatically set the permissions of unixsocket after the system restarts. Every time the system restarts, we need to execute the following command to modify the permissions of unixsocket: sudo...
How to debug CLI mode in PHPStorm?
Apr 01, 2025 pm 02:57 PM
How to debug CLI mode in PHPStorm? When developing with PHPStorm, sometimes we need to debug PHP in command line interface (CLI) mode...
Explain late static binding in PHP (static::).
Apr 03, 2025 am 12:04 AM
Static binding (static::) implements late static binding (LSB) in PHP, allowing calling classes to be referenced in static contexts rather than defining classes. 1) The parsing process is performed at runtime, 2) Look up the call class in the inheritance relationship, 3) It may bring performance overhead.
How to send a POST request containing JSON data using PHP's cURL library?
Apr 01, 2025 pm 03:12 PM
Sending JSON data using PHP's cURL library In PHP development, it is often necessary to interact with external APIs. One of the common ways is to use cURL library to send POST�...
