2019年2月4日 星期一

Vue 學習筆記 (一) : 環境配置

前幾天稍微涉獵了前端網頁框架的比較之後, 決定挑選 Vue.js 作為將來專案開發的前端架構, 主要是參考了下面幾本書進行功能測試. :
  1. 一次搞懂熱門前端框架 (旗標, 陳禹豪譯)
  2. 前端設計範式三大天王之 Vue.js (佳魁, 梁睿坤)
Vue 是一個用來建構互動式使用者介面的 Javascript 函式庫, 此框架的作者尤雨溪 Evan You 是前 Google 工程師, 在參與了 Angular 的開發工作後, 從中汲取了所喜歡的部分創建了輕量的 Vue.js 框架, 於 2014 年正式以 MIT 開源發布之後迅速成為 GitHub 最受歡迎的開源專案之一. 與其主要競爭對手 React 與 Angular 比起來, Vue 具有如下優勢 :
  1. 乾淨可讀性高的 HTML 輸出, 無其他框架常見的冗長自訂屬性與 class. 
  2. API 介面簡單易學易用. 
Vue 的作者稱 Vue 為 Progressive Framework (漸進式框架), 因為 Vue 核心函式庫只專注於視圖層, 開發者只要用最小的努力即可建構應用程式, 隨著功能要求增多, 可添加其他函式庫如 Vuex, Vue-Router 等來擴增功能. 參考 :

# 維基 : Vue.js
# 百度 : 尤雨溪

Vue 有完整的 API 與教學文件, 參考官網與 GitHub :

# https://vuejs.org/v2/api/
# https://vuejs.org/v2/guide/
# https://github.com/vuejs/vue

要在專案中使用 Vue.js 需先做環境配置, 第一種作法是自備 vue.js, 可在 Vue 官網下載 vue.js 或 vue.min.js, 注意, 在開發階段不要使用 "Production Version" (即 vue.min.js), 建議下載上面的 "Development Version" (即 vue.js), 因為它有完整的偵錯與警告訊息, vue.min.js 適合正式上線時用.

# https://vuejs.org/v2/guide/installation.html




目前版本是 v2.5.22 版, 下載 vue.js 後放在專案目錄下的 /js 子目錄, 例如 D:/vue/test/js :


使用本地 vue.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="js/vue.js"></script>
  </head>
  <body>
    <script> /* …your code here… */ </script>
  </body>
</html>


第二種作法是使用 CDN 所提供的 vue.js, 有下列 4 個 CDN 來源可用 :

1. Vue 官網 : (提供最新版本)
https://vuejs.org/js/vue.js

2. CDNJS : (預設提供最新版本, 亦可指定版本)
https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.js

3. unpkg CDN : (可指定版本)
https://unpkg.com/vue 
https://unpkg.com/vue/dist/vue.js
https://unpkg.com/vue@2.5.22/dist/vue.js

4. JS Delivr : (預設提供最新版本, 亦可指定版本)
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js

以 unpkg 為例 :

使用 unpkg CDN

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue@2.5.22/dist/vue.js"></script>
  </head>
  <body>
    <script> /* …your code here… */ </script>
  </body>
</html>

準備好 Vue 函式庫來源即可開始撰寫 Javascript 進行專案開發了. 這個應用程式 (App) 可以直接寫在 HTML 中, 也可以寫在獨立的 js 檔案, 例如 :

載入外部應用程式 app.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="js/vue.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body>
    <script> /* …your code here… */ </script>
  </body>
</html>

為了便於維護應用程式與維持 HTML 碼可讀性, 應該將應用程式寫成外部程式為宜.

於

沒有留言:

張貼留言