fbpx
Javascript工程思維網頁前端

用Vue.js框架實作自己的Blog – CH2 環境建置

在上回這裡對Vue有了基礎概念後,在開寫Vue之前肯定需要經歷一番環境建置的陣痛期啦~不過其實在建置Vue.js的環境我個人覺得還算友善,不像某Tensor開頭的機器學習框架,要建立GPU計算的環境真的是弄到懷疑人生......,今天就來跟大家分享一下小弟在建置Vue.js環境時遇到的過程以及遇到的狀況   首先,那個Node.js與NVM (Node Version Manager)   因為在學習Vue之前我主要都是利用SFTP auto save上傳到Host然後再看改動的方式開發,基本上沒有接觸過本地端的開發方式,所以也沒有使用過Node.js的經驗,所以在安裝Vue之前必須先進行Node.js的環境安裝,基本上這也是在所以過程中最讓我印象深刻的地方。   安裝Node.js有幾種方式,第一種就是直接上Node.js的官方網站下載直接安裝,我一開始也是直接利用這種方法,但後來後悔了;第二種是利用Node的版本控制工具 - NVM進行安裝,這是我蠻推薦的作法,畢竟在開發或維護不同的專案時,每個專案開發時的Node版本可能不盡相同,所以這時候NVM的優勢就是可以讓我們直接快速地進行Node.js的版本切換,不用再刪除重裝之類的。   要安裝NVM的方法基本上非常簡單,只需要使用他們官方的Github上說明的指令,即可在Terminal進行安裝: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash 在下載完NVM之後可以嘗試在Terminal執行 nvm --version 如果他有回應相應的版本號,就代表NVM安裝成功了,接著就可以進一步利用NVM安裝Node.js。   利用NVM安裝Node.js…
學程式助教
March 11, 2020
Javascript工程思維網頁前端

用Vue.js框架實作自己的Blog – CH1 新的開端

接觸前端到現在也差不多快一年半了,過去在開發前端的時後,都是使用原生javascript與jQuery以及php進行開發,雖然隨著時間推移接觸到的東西越來越多,開始有了有系統性開發與後續維護的需求,剛開始頂多就是將JS與php物件化,但還是無法完全解決頁面控制以及資料、事件、渲染、樣式控制等不同任務間的分離,所以開始接觸Vue.js框架來增加開發效率並且將原本幾乎純手刻的這個Glovecoding blog進行翻新,順便寫篇系列紀錄一下~ Beginner of Vue 在約莫半年前的時候其實就有試著自學Vue框架的想法了,但當時自己的背景知識量還不大夠,包括AJAX的運作以及同步異步的線程阻塞問題等,在當時都是我無法掌握的技術,最近把這些東西補齊並且看了根webpack相關的技術之後,才回頭撿起這個框架慢慢開始啃。Vue的框架有一個非常大的優點,尤其是對於英文較不熟練的開發者而言,因為開發Vue框架的工程師是來自中國的,所以他本身官網的技術文件都支援簡體中文,如果不習慣閱讀簡中的朋友也可以利用Chrome 的功能把它翻成繁中XD,在進入實作之前還是得先來了解一下這個框架本身的特性。 Components 組件的概念 在使用Vue框架的時候會不斷地使用到Components來進行網站頁面的組裝,依照不同的頁面需求,引入不同的components 到根(Root) 或是常見的App頁面,在這個框架中,其實整個網站結構很像一個葡萄串,從最上面的Root 到下面的頁面(View) 與組件(Component) 不斷的往下串,最終變成一個不斷串連組裝的網站結構,像我的Blog 結構大概長這樣: 整個部落格主要分為首頁、分類、關於、文章、404Notfound 五個頁面,這五個頁面會附著於#APP這個根上,而每一個頁面各自會使用到不一樣的組件進行組裝,這些組件的方便之處就在於:像是首頁與分類頁面都會使用到卡片作為文章的顯示方式,在一般的情況我們需要把相同的版型寫在不同的頁面,這就會造成在維護上的麻煩,尤其又是使用PHP生成內容的時候,只會使頁面變得越來越複雜,然而在Vue框架中,我們可以把這些會重複使用到的版型部分化做組件(Component) 他是一個獨立的模板,在需要使用到這個模板的時候,我們只需要引入這個版型即可,像blog首頁的卡片式文章顯示就是利用上圖中的紅色組件 - CardUi 所架構,而組件的運作方式在之後的文章中,我會在獨立介紹他。 資料驅動一切 在Vue框架當中,有另一項特色就在於它是利用資料驅動所有變化的,當資料發生變化時,Vue會根據我們設定的情況做出相應的改變,首先在這個架構中,資料與模板是獨立分離的,在一開始寫網頁時,我們會直接將內容寫在HTML的標籤當中,或是透過PHP在預處理階段時生成,但在Vue框架中,資料會獨立存取在Vue物件的Data中,然後在物件被實例化的Creat階段時渲染(Render) 進模板當中,像是這樣:…
學程式助教
March 11, 2020
HTMLJavascript工程思維技術問題網頁前端資源整理

盤點10個超多人使用的前端動畫庫!

在網頁設計上,你可能固定使用某幾個動畫庫,但你知道 GitHub 上面其實有超多超夯的前端動畫庫嗎? 前端動畫不僅能代表該網頁製作者與單位的用心,同時也能增加使用者好的體驗, 這篇文章幫喜愛網頁互動動畫的你整理了10個超多人推薦的前端動畫庫! 我們趕快往下看吧! 1. jQuery.countdown 創立者:hilios GitHub 人氣:2.2K stars GitHub 傳送門:https://github.com/hilios/jQuery.countdown 2. aniJS 創立者:anijs GitHub 人氣:3.6K stars GitHub 傳送門:https://github.com/anijs/anijs 3. matter-js 創立者:liabru…
學程式助教
March 4, 2020