開始使用 VueJS – MVVM 架構

在 VueJS 的 EcoSystem 中，有非常多的外掛、套件與開發應用可以自行安裝，我們使用最為便利的 @vue/cli 套件，因為它已經結合 webpack, minitify 這類打包與壓縮等開發工具，並可用 NPM 一個指令下載安裝。

Adsense

Table of contents

直接引入 JS 至 HTML

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

下方是基礎範例，讓 VueJS 開始監控 HTML DOM，接著你可以立刻在 HTML 頁面上看到 “Hello Vue!” 。利用 v-if 與變數 data.seen就可以控制 UI 繪製的結果。

<div id="app" v-if="seen">
  {{ message }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    seen: true
  }
})
</script>

使用 NPM (Node Package Management) 管理

當 JavaScript 變得越來越強大，以JavaScript為基礎的 NodeJS NPM 管理系統也變得越來越普級。許多網路/網頁開發的工具都被包成套件並被放上 NPM 系統，這是個很好的方式安裝 VueJS 的各種套件工具，例如 VueJS本體、Webpack、Lint…等相開開發工具。

安裝 NPM Install NPM
安裝 @vue/cli => npm install -g @vue/cli
建立 Vue 專案 => vue create hello-world
選擇專案內的工具
建議選擇 TypeScript, Babel轉譯、Router、Linter/formatter
接著 @vue/cli 套件會自動設定好 TypeScript 與 Vue.js

如何開始 VueJS

使用 @vue-cli 安裝 Vue 專案的話，整個目錄與架構都會與標準 HTML 的引入方法不一樣。所有的檔案都會以 .vue 的 Single File 的方式被包裝並放在 /src 目錄中，要正式上線時才會執行 npm run build 的指令，裝 Vue 檔的內容全部轉譯成標準 HTML、JavaScript、CSS。

執行專案

下方指令是本機端開發測試時運行用的

// vue.js
npm run serve

// nuxt.js
npm run dev

轉譯專案

要將檔案放上伺服器時，要執行轉譯將Vue檔換成標準HTML格式、瀏覽器才能讀得懂。

npm run build

MVVM 模型

提到前端開發通常會想到 MVC (Model, View, Controller) 模型，VueJS 本身使用的是 MVVM (Model, View, ViewModel) 的模型。只要考慮顯示的 UI View 與資料傳輸的 Model，Vue engine 會自動以 ViewModel 的模型幫忙繪製 UI

Lint

@vue/cli 的安裝選項中可以加入 Lint 的套件，但只適用 Script，CSS的部份請參考下方文章

http://blog.kueiapp.com/programming-tw/add-css-stylelint-to-vue3-project/

範例

https://github.com/kueiapp/vue-typescript-tutorial/blob/main/src/App.vue