在 Laravel 中使用vue（二）

上篇介紹了vue,以及在如何 Laravel 快速搭建vue環境。

這篇講如何在 Laravel 中更深入使用Vue。

預先處理

vue還支援使用預先處理工具，比如jade, sass等等。假設使用Stylus, Jade，那就npm install 一下唄

npm install stylus jade --save-dev

然後在vue檔案中指定，你使用的預先處理工具是什麼

.hello  h1 Hello Vue

Components

Vue允許我們做模組化封裝，以一個Alert模組為例，這個模組的功能是彈出提示，然後使用者可以手動關閉，程式員可以設定樣式，內容等等。目錄劃分，增加多一個components 的檔案夾來存放模組，它跟views下的vue檔案區別在於，它們是在多個頁面呈現，或者是可以獨立完成商務邏輯的可複用模組，而views 下是一個Vue執行個體的入口。

.├── components│   └── alert.vue├── entries│   └── hello.js└── views    └── Hello.vue

引入子模組

.wrapper  alert()    | Hello Vue  alert(type='error')    | Danger  alert(type='success')    | Login Success

Alert 模組的具體實現

.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()

頁面效果是這樣的：

點擊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

      Laravel                      

之前是直接整個vue檔案壓入，現在替換成一條語句，檔案大小13KB

var _vue = (typeof window !== "undefined" ? window['Vue'] : typeof global !== "undefined" ? global['Vue'] : null);

TheEnd

我把Laravel項目中相關 原始碼 都提交到github 了，需要的同學自行查閱。

