vue-cli 筆記

最近去學 vue-cli，畢竟……懂 .vue 好像是 Vue 開發者的必備技能。發問的社團裡面，有人推這個軟體。用了這個軟體後……我有一種相見恨晚的感覺。

以下筆記是摘自 Github 的筆記。

Hello world app

一開始 vue init 的東西就是 Hello World。在 .vue 裡面，大多數寫法和毫無設定的 Vue 差不多。不過 instance 的形式有點不一樣，要注意……

接著，這個 component 最重要的問題是如何定時更改……問題的訣竅，是利用 setInterval 永遠定時的特性，還有 JavaScript 函式的 this 是透過呼叫所在地的作用域參照，這兩個特質來完成。

最後有個與前幾天面試相關的簡答：

<style scope lang="scss">
<!-- 這個的意思是什麼？ -->

• scope 的意思是：style 的只會在 .vue 裡面做動。 > Add "scoped" attribute to limit CSS to this component only
• lang 可以讓你使用喜歡的預處理器，前提是要安裝該處理器。

之後再說說 Vue Router？

Mutiple Vue routers

有時候，我們不會只有一個組件（或著說，不會只有一個 .vue 檔要用），屆時要怎麼做呢？答案是命名視圖。

1. 在 App.vue 裡面引入多個 <router-view name="apptitle"></router-view> 組件：<router-view /> 只會載入一個！
2. 去 src/router/index.js 修改 component 為 components。
3. components 裡面引入需要的組件。請注意要把組件本身引進去。

Main app

1. 注意 DOM 行為的單位與對應事件：例如要提交一個表單，執行提交的 DOM 是 <form> 而不是 <input type="submit">。如果在錯誤的 <input type="submit"> 下指令，那麼 DOM 就沒有辦法執行指定的事件了。請參考 v-on:submit.prevent not stopping form submission
2. What the hell is "Elements in iteration expect to have 'v-bind:key' directives"? What?
3. v-model 的綁定真的很魔幻…很魔幻……

Deploy

用 vue-cli 產生的東西，如果要部署到 Github Pages 的話，有很多教學與套件。但教學一個比一個雷、套件一個比一個難用……稿不清楚是我理解力太差、還是怎麼樣……總之，我最後選了 vue-gh-pages 來用。省事。

總之，readme 的檔案重寫了。

另外，把程式碼排好的快捷鍵，在 ubuntu 是 Ctrl + Shift + I。