在 Laravel 中使用vue（二）-php教程-PHP中文網

首頁

後端開發

php教程

在 Laravel 中使用vue（二）

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 20, 2016 pm 12:26 PM

上篇介绍了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 了，需要的同学自行查阅。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

繼續使用PHP：耐力的原因Apr 19, 2025 am 12:23 AM

PHP仍然流行的原因是其易用性、靈活性和強大的生態系統。 1)易用性和簡單語法使其成為初學者的首選。 2)與web開發緊密結合，處理HTTP請求和數據庫交互出色。 3)龐大的生態系統提供了豐富的工具和庫。 4)活躍的社區和開源性質使其適應新需求和技術趨勢。

PHP和Python：探索他們的相似性和差異Apr 19, 2025 am 12:21 AM

PHP和Python都是高層次的編程語言，廣泛應用於Web開發、數據處理和自動化任務。 1.PHP常用於構建動態網站和內容管理系統，而Python常用於構建Web框架和數據科學。 2.PHP使用echo輸出內容，Python使用print。 3.兩者都支持面向對象編程，但語法和關鍵字不同。 4.PHP支持弱類型轉換，Python則更嚴格。 5.PHP性能優化包括使用OPcache和異步編程，Python則使用cProfile和異步編程。

PHP和Python：解釋了不同的範例Apr 18, 2025 am 12:26 AM

PHP主要是過程式編程，但也支持面向對象編程（OOP）；Python支持多種範式，包括OOP、函數式和過程式編程。 PHP適合web開發，Python適用於多種應用，如數據分析和機器學習。

PHP和Python：深入了解他們的歷史Apr 18, 2025 am 12:25 AM

PHP起源於1994年，由RasmusLerdorf開發，最初用於跟踪網站訪問者，逐漸演變為服務器端腳本語言，廣泛應用於網頁開發。 Python由GuidovanRossum於1980年代末開發，1991年首次發布，強調代碼可讀性和簡潔性，適用於科學計算、數據分析等領域。

在PHP和Python之間進行選擇：指南Apr 18, 2025 am 12:24 AM

PHP適合網頁開發和快速原型開發，Python適用於數據科學和機器學習。 1.PHP用於動態網頁開發，語法簡單，適合快速開發。 2.Python語法簡潔，適用於多領域，庫生態系統強大。

PHP和框架：現代化語言Apr 18, 2025 am 12:14 AM

PHP在現代化進程中仍然重要，因為它支持大量網站和應用，並通過框架適應開發需求。 1.PHP7提升了性能並引入了新功能。 2.現代框架如Laravel、Symfony和CodeIgniter簡化開發，提高代碼質量。 3.性能優化和最佳實踐進一步提升應用效率。

PHP的影響：網絡開發及以後Apr 18, 2025 am 12:10 AM

PHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip

PHP類型提示如何起作用，包括標量類型，返回類型，聯合類型和無效類型？Apr 17, 2025 am 12:25 AM

PHP類型提示提升代碼質量和可讀性。 1)標量類型提示：自PHP7.0起，允許在函數參數中指定基本數據類型，如int、float等。 2)返回類型提示：確保函數返回值類型的一致性。 3)聯合類型提示：自PHP8.0起，允許在函數參數或返回值中指定多個類型。 4)可空類型提示：允許包含null值，處理可能返回空值的函數。

See all articles