Vue.js 開發環境建置

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

• 使用 CDN 或下載後使用本機檔案
• 使用 npm 安裝
• 使用 vue-cli

使用 CDN 或下載後使用本機檔案

官方推薦 unpkg，與 npm 一致是最新的版本。

範例如下。

<div id="app">
  ${ message }
</div>
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
      message: 'Hello World!',
    },
  });
</script>

備註：由於部落格會把使用雙花括號的內容吃掉，所以另外設定 delimiters 以顯示完整程式碼。

打開頁面就會看到

在開發階段使用開發版本 (Development Version) 是較好的選擇，這樣出錯時就會顯示提示訊息。

使用 npm 安裝

npm install vue --save

使用 vue-cli

vue-cli 是一個快速建立 Vue.js 專案的工具，對於 Node.js 工具熟悉的開發者，推薦使用 vue-cli。

使用這個選項不僅是載入 vue，而且是建立整個專案架構。因此，若是新建立的專案，建議使用這個方法。

詳細說明可參考 vue-cli。