VueJS - 從不停下來的學習

Vue 終於都超越 React 了

一直以來都被質疑為什麼不學學 React 而選擇了 Vue。不過 6月5日 Vue 在 Github 上的星星數終於超過了 React，雖然不排除 Vue 的星數內有很大量中國用家的水份，但是 Vue 確實是受到世界用家的關注，雖然晚了點出文來說，但不足一個月己經超前了 1000 多星了。 Vue Roadmap 原作者 Evan You 也在努力開發及改進 Vue。不只是單單小修補及更新，現在 Vue 來到 v2.

VueJS

vue-cli 3.0 試玩

最新發現 vue-cli 進行大更新並開了個別專頁。3.0 新增的功能比想像中多，而且跟 2.x 有很大分別，更大程度訂製了 Vue 的開發流程。首先必須重新安裝 $ npm install -g @vue/cli 安裝功能 vue-cli 最初及最基本的功能也得到強化，比以前更簡單快捷使用 vue create project-name來建立新 project。選擇 first 可以一口氣安裝最基本的 vue 組合，

VueJS

256pages 開發日誌 (2)

動態 SVG 背景開始時第一個遇到的問題就是 Background。我構思中是使用 SVG 做背景。每次轉頁是 SVG 動態轉成另一個形狀。我曾經試用 Snap.svg 及 SVG.js 來做這效果，但由於都比較困難，所以最後選用一個比較舊的 Library SVG Morpheus。先比較一下各 Library 的分別。 Snap.svg 很多人推薦的 SVG animation library。但在做動畫時需要由指定一個

VueJS

256pages 開發日誌 (1)

上回提要：開始時我使用 NuxtJs 時感受到一時方便，自動完成 hotreload 及 router 設定，但是相對來說也造成了之後靈活性不足的問題，所以最終 256pages 還是全面改用原裝的 VueJs 來作 framework 。基本框架 Home - 播片及 Banner About - 自己介紹及網頁介紹 Project - 我的作品集 Contact - 聯絡方法原型使用官方提供的 Webpack template，

VueJS

VueJS Components 共用數據

有時候不同 components 之間有少量數據希望共用，但又不想用到 Vuex 這麼麻煩的話，有比較方便的做法可以使用。就是使用 VueJS 的 Global Mixins 來儲放 data 了。 Global Mixins 的用法簡單來說就是把平時放在 export default 中的 data 搬到 Vue Minins 中。例如我有一些 data export default { data { name:

VueJS

VueJS 中設定共用的 Sass 變數

上回架設了基本的 VueJS 開發環境，接下來要進行一些設定。因為在這個架構下，可以很方便的預處理SASS，基本上不用另外設定，但是之前在 NuxtJS 中已經有 SASS 中設定變數不能共用的問題。不過現在 vue-loader 已經有官方解決方法，就是使用 sass-resources-loader 載入global的變數。用法很簡單，使用 'npm' 安裝 $ npm install sass-resources-loader --save-dev 在 build/utils.js 中設定 scss: generateLoaders(

VueJS

新手 VueJS 2 + Webpack 開發設定

不借助 NuxtJS 下開始動手架起一個 VueJS 的架構，我們會使用 Webpack 建立起有 hot-reload 的開發環境。開發環境為了有效地在本地開發，最近使用了 Visual Studio Code 為開發工具 (以下簡稱 VSC )。雖然是 Microsoft 開發的工具，但背後跟 Github 開發的 Atom 使用了相同的 Electron 架構來開發，速度跟 Atom 相比有過之而無不及，而且最大的好處是原生功能比

NuxtJS

Sass in NuxtJS

以前對Sass/SCSS等需要預處理的CSS Style有一定抗拒，因為需要安裝一堆應用程式，每次更新都需要處理一次，但是現在在NuxtJS中有Vue Loader處理，不論那一種需要預處理的CSS都可以輕鬆搞定。在多種預處理的CSS中我先是賞試了Sass，不用再加任何標點符號真的很棒！ Sass nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } 原本是這樣的CSS

NuxtJS

NuxtJS + Socket.io + https

我希望在NuxtJS中以Socket.io為傳送資料的方式，不過功力有限連Socket.io都沒搞定。發現NuxtJS官方其實有實例是在https中運作。不過事情當然沒這麼簡單，官方上沒有什麼說明，我也只好當成NuxtJS一樣安裝。 $ npm install nodemon 這個例子用了nodemon作管理，我也直接照用好了先安裝一下 $ npm run dev 啟動看一下 Socket.io不能通過https，瀏覽器會就說Mixed Content，就是https的頁面要取資料一定要經https才安全。解決方法想到解決的方法有兩個把Socket.io變成https 令到Socket.io不用https也能通過經過一輪測試才找到方法因為NuxtJS官方版本是用https的，我曾在nuxt.config.

NuxtJS

NuxtJS 100% CPU

CPU直升100% 開發時不知是什麼原故，伺服器CPU一直衝到100%以上用htop查看一下就發現是我的Vue搞出來的，而且伺服器供應商不繼向我發出警告Email！解決方法然後在GitHub找到了應該是解決方法，似乎是Webpack跟Nodejs的問題。就是將整個node_modules移除再安裝！好吧... $ sudo rm -rf node_modules $ npm install 重新安裝node_modules後，CPU Loading似乎回復正常了

NodeJS

用NuxtJS取代Webpack＋Express

簡化版的Vue2架構發現了NuxtJS這東西，可以簡易取代webpack+express+router的部份，雖然我已經完成了Webpack+Express架構部份。但是router跟server side render沒NuxtJS方便，而NuxtJS的概念是跟據React的NextJS做成，其中hot reload部份對開發十分有幫助。 Nuxt.js這東西是整合了Vue2 + Vue-Router + Vuex + Vue-Meta + Express + Webpack而成，能快速組成基本開發架構，省下不少時間。 Ubuntu 16.04.1 LTS NodeJS 6.9.4 npm 3.

NodeJS

Rebuild NYS

NYS網站幾乎每年都重建一次，今年亦不例外，今次我希望不再受open source所限制，直接用JS Framework寫成網站，那麼以後database也可以重用，免去轉平台時要把資料轉移的痛苦。重設伺服器一直在使用Linode雖然性能不錯，但是對開發環境不是相當友善，在搜尋開發的文章時常常也是找到DigitalOcean的官方文章，感覺對開發者的支援相當好，回想之前也有一個Wordpress來寫上一個版本NYS的開發過程。不過現在的Linode未過期，暫時繼續使用吧！看看我原有的伺服器還是Ubuntu 14.04 LTS，在備份舊資料後就重置成最新的Ubuntu 16.04 LTS。再以Nginx來做Proxy Server及管理SSL。什麼PHP，MySQL，Apache也不需要了，因為我要使用全新的Framework來做開發。開發環境承上篇文章，我打算以Vue2為framework進行開發，

AngularJS

Javascript Framework 選擇 2017

自從由open source cms出走，已經準備改用Javascript Framework，但是現在正是JS Framework百家齊放的時候，我該如何選擇也對以後的開發很大影響。 AngularJS 在現在的公司初次接觸的是Google老大開發的AngularJS 1，這款全能的框架使我對JS Framework了解深入了不少。AngularJS 1整體效能不算十分優秀，但是結構上很完整，對初次接觸此類framework的我來說也可以上手。聽說AngularJS 2的效能有不錯的提升，但是整體架構太大，對新手的我需要學習太多東西，只能就沒有更好的選擇時我會考慮使用。 ReactJS 雖然對Facebook開發的ReactJS沒有太深入了解，不過看其他高手都指出ReactJS只有MVC的V部份，需要再結合其他library來開發，這部份對我來說難度太高，一套也搞不定的我還要做這種整合一定不會成功。 VueJS 然後我就遇上了VueJS2，看起來不錯，應有盡有但不會太複雜。細看之下原來是中國人開發的個人Project，