Vue.js 學習旅程Mile 2 – 環境建置篇

相容性

Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。

環境安裝

Vue 的開發環境建置有以下幾種方法：

1. 使用 <script> 引入下載的檔案或 CDN
2. 使用 npm 安裝
3. 使用 vue-cli

請參考官網提供的最新版本資訊。

<script> 引入

下載檔案

直接下載並用 <script> 標籤引入，Vue 會被註冊為一個全域變數。
分成 開發版本 與 生產版本

建議下載非壓縮的開發版本，才會跳出錯誤訊息的警告

CDN

對於開發中環境，可以引入最新版本。

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

對於生產環境，建議指名一個明確的版本號和構建文件，以避免新版本造成的不可預期的破壞。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

NPM

在構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和例如 Webpack 或 Browserify 模塊打包器配合使用。

# 最新穩定版
$ npm install vue

Vue-CLI

Vue-CLI 是一個快速建立 Vue.js 專案架構的工具。更多詳情可查閱 Vue CLI 的官方文件。在之後也會有更詳細的文章來介紹。

$ npm install -g @vue/cli

開發好幫手

Vue Devtools

在瀏覽器上安裝 Vue Devtools，可以在開發者模式中檢視與調整 Vue 的應用。
以 Chrome 瀏覽器為例，安裝擴充工具：

VS Code

在 VS Code 文字編輯器上安裝相關的擴充套件

• Vetur：包含語法上的視覺化、自動完成等功能
• Vue 2 Snippets：新增一些 vue 的常用模板
• Live Server：可以在存檔後立即更新瀏覽器內容

Vue 的開發者工具建議在 web server 下運行，透過在本地開啟一個 web server 來將本地的網頁內容(HTML 、CSS、JavaScript ）模擬成放在伺服器中。
在網址列輸入 http://localhost:3000 (port 可能會不一樣)網址後可以正確收到網頁內容，並在執行不同操作發出請求時，可以正確接收到對應的網頁內容，讓開發環境與伺服器環境接近。