# Vue.js 學習旅程Mile 2 – 環境建置篇
###### tags: `w3HexSchool` `Vue` `Javascript`

## 相容性
Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有[兼容 ECMAScript 5 的瀏覽器](https://caniuse.com/#feat=es5)。

## 環境安裝

Vue 的開發環境建置有以下幾種方法：
1. 使用 `<script>` 引入下載的檔案或 CDN
2. 使用 `npm` 安裝
3. 使用 `vue-cli`

請參考[官網](https://cn.vuejs.org/v2/guide/installation.html)提供的最新版本資訊

### `<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 的[官方文件](https://cli.vuejs.org/)。在之後也會有更詳細的文章來介紹。

$ npm install -g @vue/cli

## 開發好幫手
### Vue Devtools
在瀏覽器上安裝 [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools)，可以在開發者模式中檢視與調整 Vue 的應用。
以 Chrome 瀏覽器為例，安裝擴充工具：

### VS Code
在 VS Code 文字編輯器上安裝相關的擴充套件
* [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)：包含語法上的視覺化、自動完成等功能
* [Vue 2 Snippets](https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets)：新增一些 vue 的常用模板
* [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)：可以在存檔後立即更新瀏覽器內容

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