Vue.js 開發環境建置

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

使用 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 以顯示完整程式碼。

打開頁面就會看到

Vue.js 開發環境建置 - 使用 CDN 連結或下載後使用本機檔案

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

使用 npm 安裝

npm install vue --save

使用 vue-cli

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

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

詳細說明可參考 vue-cli


comments powered by Disqus