iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 3
2
Modern Web

「小孩才做選擇,我全都要。」小白也能輕鬆瞭解的 Vue.js 與 D3.js 。系列 第 3

[ Vue.js ] 環境建置

環境搭建

一般來說建置 Vue.js 的完整專案會使用 Vue-cli 工具來產生專案目錄,但如果只是想要快速學習 Vue.js 不必安裝過多的環境,Vue.js 的官網提供了 CDN 的作為引入方式,讓有興趣的人可以更快參與其中,而目前提供的版本分別為:

  • 開發版本:這個版本包含了完整的開發人員工具以及提示報錯等等的協助,適合開發時使用。
  • 生產版本:這個版本則是將上述開發工具都拔除,盡量縮小它的體積,適合正式發布時使用。

而我們目的是體驗 Vue.js 的開發,因此選擇開發版本,並將其導入 HTML 的 head 中即可:

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

接著在 HTML 的部分我們需要建立一個元素並選擇性使用 classid,讓待會 Vue.js 知道它要渲染的範圍。

<body>
  <div id="app">

  </div>
  <script>
      // 待會用來初始化 Vue 的地方
  <script>
<body>

在 JavaScript 部分,我們需要初始化 Vue.js 的實體,就好像飲料販賣機一樣,投個硬幣拿到這個商品後我們就可以開始使用它。透過 new 初始化 Vue 的物件之後,傳入一些基本的設定,其中 el 的值需要放入綁定的元素好比上方範例中的(app);而 data 的值則是傳入一個物件,這裡主要是用來存放資料的部分,而 keymessage)的部分將會用在樣板語法中供 Vue.js 去找到對應的 value'Hello, Vue.js!')最後將它顯示出來。

var vm = new Vue({
  el:'#app',
  data:{
    message:'Hello, Vue.js!'
  } 
})

最後,我們在剛才的 HTML 部分中使用樣板語法(兩對花括弧),裡面塞入剛才的 keymessage),就可以將其對應的 'Hello, Vue.js!' 渲染出來:

<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
     var vm = new Vue({
      el:'#app',
      data:{
        message:'Hello, Vue.js!'
      } 
    })
  </script>
<body>

如此一來,將頁面打開來時就能看到 Hello, Vue.js!了。找回最初的感動(?

https://ithelp.ithome.com.tw/upload/images/20190904/20119062w0tUzpaNA2.png

此系列文往後 Vue.js 的教學,也都像這樣只要引用 CDN 就可以一起實作囉!我們明天歡樂周五見!

BONUS:平時開發常用設定

趁今天的 loading 較少,順便介紹平時個人開發 Vue.js 的一些簡單設定!!

  • 作業系統: 目前主要是在 Windows、以前則是用 macOS (雙棲動物)
  • 程式碼編輯器: Visual Studio Code (free)

編輯器推薦套件

  • Auto Rename Tag:更改標籤時,想一次更改開始標籤與結尾標籤可以考慮安裝這個!
  • Bracket Pair Colorize:將程式碼區塊前後顏色配對,可以快速找到該區塊範圍在哪。
  • Live Sass Compiler:可以自動編譯 SASS(SCSS)並同步輸出成未壓縮版與壓縮版的 CSS 檔。
  • Live Server:模擬一個 Local Web 環境,具有熱更新的功能,也就是一更改程式碼就會即時顯示變化在頁面上。
  • Vetur:由 Vue.js 作者尤雨溪與微軟開發者Pine Wu官方合作的套件,支援了語法高亮語法快捷等等強大的功能。

Chrome 瀏覽器推薦套件

  • Dimensions:可以快速量網頁上元素之間的距離。
  • ColorPick Eyedropper:可以快速捕捉網頁上的色彩顏色(RGB、HEX 等等應有盡有)。
  • Vue.js devtools:開發必備,可以即時監測 Vue 實體中的資料狀態等等資料,你想一邊 Debug 一邊觀看 Data 的狀況嗎?安裝他吧!

https://ithelp.ithome.com.tw/upload/images/20190904/20119062BP5oyN0ahL.jpg

如果還有其他好用的工具也歡迎讀者投稿囉!

附上睡好睡滿的黑黑一枚
https://ithelp.ithome.com.tw/upload/images/20190904/20119062jwvriGZ0Tv.jpg


上一篇
[ Vue.js ] Why Vue.js? 我能不要用他嗎?
下一篇
[ Vue.js ] 指令 Directives
系列文
「小孩才做選擇,我全都要。」小白也能輕鬆瞭解的 Vue.js 與 D3.js 。37

尚未有邦友留言

立即登入留言