跟AdonisJs與Vue一起玩的那些事兒 / Diary about AdonisJs and Vue

繼上次的「AdonisJs聊天室」之後，AdonisJs框架 + Vue.js + Webpack組合看起來雖然很好，但實際使用還是有很多細節不盡人意。這邊繼續記錄一下開發系統的一些瑣碎事情。

如何不編譯直接在前端瀏覽器使用Vue.js插件？以vue-slim-tabs為例 / How to use Vue.js Plugins in Browser Without Module Bundler?

嗨~呦~~ 這裡是煩惱要不要用Vue.js插件的布丁。

說到網頁前端MVVM框架Vue.js，大部分時候都是以搭配後端編譯工具 (像是Webpack之類) 為前提來安裝、配置。不過實際上，很多時候Vue.js、單檔案組件(single file component)、以及它們的插件可以不需透過編譯，直接在網頁瀏覽器上執行。

這邊我以「vue-slim-tabs」為例子，它文件中的說明必須要靠編譯器才能運作。我分析vue-slim-tabs插件的原始碼，重新撰寫了使用該插件的index.html跟引用的單檔案組件vue-slim-tabs.vue。你可以點此看到實際運作的網頁。以下我來說明改寫的過程，希望對Vue.js的使用者有所幫助。

Node.js前後端CORS網頁應用試作：AdonisJs聊天室 / Practice of Build a CORS Full Stack Web Application in Node.js: AdonisJs Chat

啊囉哈~~這裡是寫程式寫到整個人都變得優雅起來的布丁。

作為網站工程師，用JavaScript開發前端就像是日常便飯一樣。但前端都用JavaScript開發了，那後端為何不用Node.js一起開發呢？這個想法是從兩年前開始，這期間跌跌撞撞不斷摸索，直到最近才找到比較理想的方案，那就是後端使用AdonisJS作為伺服器與保存資料、前端使用Vue.js控制介面與邏輯，最後搭配Webpack編譯。

為了測試我需要的功能都能正常運作，我試作了一個跨網域資源共用(Cross-Origin Resource Sharining, CORS)情境下使用的網站外掛：AdonisJS聊天室。我寫這篇，是為了將到目前為止開發的心得告一個段落。以下將說明AdonisJS聊天室的功能、系統架構與技術，最後講講開發時遭遇的問題與想法。希望能夠為其他開發者提供一些解決問題的線索。

NetBeans增加自訂標籤與屬性：能用在Vue.js上嗎？ / Customize HTML Element Tags and Attributes for Vue.js in NetBeans

大家好，我是下著大雨的悶熱週六躲到實驗室工作的布丁。NetBeans 8.2在檢查HTML格式的時候並沒有支援Vue.js的特殊標籤與屬性，不過還好我們可以手動為NetBeans的專案加入自訂設定，避免NetBeans顯示錯誤訊息。但是NetBeans的自訂標籤似乎不能接受「:」或「@」開頭的縮寫屬性(shorthands)，但「v-on:」或「v-bind:」就可以。使用的時候可能要注意這個差異。