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


Posted by yuhantaiwan on 2020-03-01


相容性

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 可能會不一樣)網址後可以正確收到網頁內容,並在執行不同操作發出請求時,可以正確接收到對應的網頁內容,讓開發環境與伺服器環境接近。


#w3HexSchool #Vue #javascript