在 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 了，需要的同学自行查阅。
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1393
52
1207
24
Alipay PHP SDK Ralat Pemindahan: Bagaimana menyelesaikan masalah 'tidak dapat mengisytiharkan kelas signdata'?
Apr 01, 2025 am 07:21 AM
Alipay Php ...
Bagaimanakah sesi merampas kerja dan bagaimana anda dapat mengurangkannya dalam PHP?
Apr 06, 2025 am 12:02 AM
Sesi rampasan boleh dicapai melalui langkah -langkah berikut: 1. Dapatkan ID Sesi, 2. Gunakan ID Sesi, 3. Simpan sesi aktif. Kaedah untuk mengelakkan rampasan sesi dalam PHP termasuk: 1. Gunakan fungsi Sesi_Regenerate_ID () untuk menjana semula ID Sesi, 2. Data sesi stor melalui pangkalan data, 3.
Jelaskan JSON Web Tokens (JWT) dan kes penggunaannya dalam PHP API.
Apr 05, 2025 am 12:04 AM
JWT adalah standard terbuka berdasarkan JSON, yang digunakan untuk menghantar maklumat secara selamat antara pihak, terutamanya untuk pengesahan identiti dan pertukaran maklumat. 1. JWT terdiri daripada tiga bahagian: header, muatan dan tandatangan. 2. Prinsip kerja JWT termasuk tiga langkah: menjana JWT, mengesahkan JWT dan muatan parsing. 3. Apabila menggunakan JWT untuk pengesahan di PHP, JWT boleh dijana dan disahkan, dan peranan pengguna dan maklumat kebenaran boleh dimasukkan dalam penggunaan lanjutan. 4. Kesilapan umum termasuk kegagalan pengesahan tandatangan, tamat tempoh, dan muatan besar. Kemahiran penyahpepijatan termasuk menggunakan alat debugging dan pembalakan. 5. Pengoptimuman prestasi dan amalan terbaik termasuk menggunakan algoritma tandatangan yang sesuai, menetapkan tempoh kesahihan dengan munasabah,
Huraikan prinsip -prinsip yang kukuh dan bagaimana ia memohon kepada pembangunan PHP.
Apr 03, 2025 am 12:04 AM
Penerapan prinsip pepejal dalam pembangunan PHP termasuk: 1. Prinsip Tanggungjawab Tunggal (SRP): Setiap kelas bertanggungjawab untuk hanya satu fungsi. 2. Prinsip Terbuka dan Tutup (OCP): Perubahan dicapai melalui lanjutan dan bukannya pengubahsuaian. 3. Prinsip Penggantian Lisch (LSP): Subkelas boleh menggantikan kelas asas tanpa menjejaskan ketepatan program. 4. Prinsip Pengasingan Antara Muka (ISP): Gunakan antara muka halus untuk mengelakkan kebergantungan dan kaedah yang tidak digunakan. 5. Prinsip Inversi Ketergantungan (DIP): Modul peringkat tinggi dan rendah bergantung kepada abstraksi dan dilaksanakan melalui suntikan ketergantungan.
Bagaimana cara menetapkan kebenaran secara automatik UnixSocket selepas sistem dimulakan semula?
Mar 31, 2025 pm 11:54 PM
Bagaimana untuk menetapkan keizinan UnixSocket secara automatik selepas sistem dimulakan semula. Setiap kali sistem dimulakan semula, kita perlu melaksanakan perintah berikut untuk mengubahsuai keizinan UnixSocket: sudo ...
Bagaimana cara debug mod CLI dalam phpstorm?
Apr 01, 2025 pm 02:57 PM
Bagaimana cara debug mod CLI dalam phpstorm? Semasa membangun dengan PHPStorm, kadang -kadang kita perlu debug PHP dalam mod Interface Line Command (CLI) ...
Terangkan pengikatan statik lewat dalam php (statik: :).
Apr 03, 2025 am 12:04 AM
Mengikat statik (statik: :) Melaksanakan pengikatan statik lewat (LSB) dalam PHP, yang membolehkan kelas panggilan dirujuk dalam konteks statik dan bukannya menentukan kelas. 1) Proses parsing dilakukan pada masa runtime, 2) Cari kelas panggilan dalam hubungan warisan, 3) ia boleh membawa overhead prestasi.
Bagaimana cara menghantar permintaan pos yang mengandungi data JSON menggunakan perpustakaan php curl?
Apr 01, 2025 pm 03:12 PM
Menghantar data JSON menggunakan perpustakaan Curl PHP dalam pembangunan PHP, sering kali perlu berinteraksi dengan API luaran. Salah satu cara biasa ialah menggunakan perpustakaan curl untuk menghantar post ...
