VueJS - 從不停下來的學習

在 VueJS 中建立 Three.js 場景

上回說明如何載入 Three.js，接下來就會建立一個簡單的場景，Three.js 建立 3D 場景的概念跟 3D 軟件中繪圖的概念相當接近，只是換成用程式來建立，如果有使用 3D 繪圖軟件的經驗會更好了解。在 Vue 中建立 Three.js 場景就先要了建 Vue 的流程。我當是使用的 Vue 版本是 2.x，Three.js 版本是 R97。Vue 的設定不多說，大家必需先學會 Vue。首先在 mounted() 中載入 this.init()，在init() 中會預先定義一些共用的數據，以便在不同的 methods 中共用。簡單說明一下我會建立以下 methods 有什麼作用

webGL

在 VueJS 中使用 WebGL

身為一個設計師，除了 SVG動態背景及中文 Web Fonts 外也沒有什麼視覺上的效果，令我的作品在設計上有所缺失！以前都是用 Flash 來開發一些超炫目的網站，但現在都轉成用 Javascript 了，當然要踏入 WebGL 的領域，開發炫眼的 3D 網站了！ Three.js應該是最多人用也是最易用的 WebGL Javascript Library，在 Three.js 的官網有不少 examples 也有中文的文件，基本上依官網來做就可以完成不少效果。不過 Three.js 對 ES6 及 Nodejs 的支援不是太理想，說明文件也不太足夠，引致當中要依靠很多額外的 plugins / library 才能完成在 Vue 中的工作。所以我寫這篇文章就是把我測試不同方法後，最為理想的解決方法。

VueJS

Vue 終於都超越 React 了

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

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 組合，vue + vue-router + vuex + sass + babel + pwa + eslint，很適合新手建站用 default 就是只安裝 vue + babel + eslint Manually select features 可以手動選擇所需

VueJS

SVG動態背景

動態 SVG 背景開始時第一個遇到的問題就是 Background。我構思中是使用 SVG 做背景。每次轉頁是 SVG 動態轉成另一個形狀。我曾經試用 Snap.svg 及 SVG.js 來做這效果，但由於都比較困難，所以最後選用一個比較舊的 Library SVG Morpheus。先比較一下各 Library 的分別。 Snap.svg 很多人推薦的 SVG animation library。但在做動畫時需要由指定一個 path 轉到另一個 path，不能由現在的 path 轉到另一個 path，雖然還是有方法在控制上不夠方便，暫且不採用。 SVG.js 聲稱速度很快的 SVG animation library。我看 SVG.

VueJS

256pages 開發日誌 (1)

上回提要：開始時我使用 NuxtJs 時感受到一時方便，自動完成 hotreload 及 router 設定，但是相對來說也造成了之後靈活性不足的問題，所以最終 256pages 還是全面改用原裝的 VueJs 來作 framework 。基本框架 Home - 播片及 Banner About - 自己介紹及網頁介紹 Project - 我的作品集 Contact - 聯絡方法原型使用官方提供的 Webpack template，我之前的教學中也有提及不再重覆。個別組件 Background - 轉頁背景也會轉 Project - 直滾橫移 Contact - 收集訪客留言待完成項目 Home - SVG mask 影片，

VueJS

VueJS Components 共用數據

有時候不同 components 之間有少量數據希望共用，但又不想用到 Vuex 這麼麻煩的話，有比較方便的做法可以使用。就是使用 VueJS 的 Global Mixins 來儲放 data 了。 Global Mixins 的用法簡單來說就是把平時放在 export default 中的 data 搬到 Vue Minins 中。例如我有一些 data export default { data { name: 'Hello' text: 'World' } } 如果是使用 main.js 作入口的話就在 new Vue 前加入 (一定要在 new Vue前) Vue.mixin({ 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('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/style/_variables.scss') } } ) 這樣你就可以把變數都放進 _variables.scss

VueJS

新手 VueJS 2 + Webpack 開發設定

不借助 NuxtJS 下開始動手架起一個 VueJS 的架構，我們會使用 Webpack 建立起有 hot-reload 的開發環境。開發環境為了有效地在本地開發，最近使用了 Visual Studio Code 為開發工具 (以下簡稱 VSC )。雖然是 Microsoft 開發的工具，但背後跟 Github 開發的 Atom 使用了相同的 Electron 架構來開發，速度跟 Atom 相比有過之而無不及，而且最大的好處是原生功能比 Atom 的外掛功能穩定，所以我由 Atom 轉用了 VSC。下載 Windows/MacOS/Linus 的版本後，先安裝一些推介使用的 Extensions。順序解說一下 Beautify - 用來快速整理頁面

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 nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px

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.js內更改很多東西也不成，最後發現要修改如下 env: { HOST_URL: process.env.HOST_URL || 'https://www.256pages.com' } 沒錯！就是把http://localhost直接換成你的https+domain

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.10.10 VueJS 2.0 Webpack 2.1.0-beta.22 Express 4.14.1 PM2 2.3.

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，所以有完整的中文文檔，也有不少活躍的社群。比起AngularJS輕巧，也比ReactJS全面，基本上VueJS2是MVVM而不是MVC，M-V-VM中的VM是ViewModel綁在一起運作，可以輕易做到很多data binding的動作。最後決定以我的能力來說，還是使用最簡單易學的VueJS。 AngularJS那種大架構 ReactJS還得再學另一套東西來整合 VueJS有很多中文例子及教學不過我還在學習使用中，正式有網站推出時再追加些心得吧。