從不停下來的學習

Sign in Subscribe

VueJS

一個用於建立使用者介面的開源JavaScript框架，也是一個建立單頁面應用的Web應用框架。

在 VueJS 中建立 Three.js 場景

在 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 有什麼作用

在 VueJS 中使用 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 中的工作。所以我寫這篇文章就是把我測試不同方法後，

Vue 終於都超越 React 了

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，

vue-cli 3.0 試玩

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 可以手動選擇所需

SVG動態背景

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.

256pages 開發日誌 (1)

256pages 開發日誌 (1)

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