Vue.js 開發環境建置 | vue開發
07Apr2017Vue.js的開發環境建置有以下幾種方法:使用CDN或下載後使用本機檔案使用npm安裝使用vue-cli使用CDN或下載後使用本機檔案官方推薦unpkg[1],與npm一致是最新的版本。範例如下。
Vue.js 的開發環境建置有以下幾種方法:
使用 CDN 或下載後使用本機檔案 使用 npm 安裝 使用 vue-cli 使用 CDN 或下載後使用本機檔案官方推薦 unpkg[1],與 npm 一致是最新的版本。
範例如下。
<div id="app"> ${ message } </div> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> <script> var app = new Vue({ el: #app, delimiters: [${, }], data: { message: Hello World!, }, }); </script>備註:由於部落格會把使用雙花括號的內容吃掉,所以另外設定 delimiters 以顯示完整程式碼。
打開頁面就會看到
在開發階段使用開發版本 (Development Version) 是較好的選擇,這樣出錯時就會顯示提示訊息。
使用 npm 安裝 使用 vue-clivue-cli 是一個快速建立 Vue.js 專案的工具,對於 Node.js 工具熟悉的開發者,推薦使用 vue-cli。
使用這個選項不僅是載入 vue,而且是建立整個專案架構。因此,若是新建立的專案,建議使用這個方法。
詳細說明可參考 vue-cli[2]。
References unpkg (unpkg.com) vue-cli (cythilya.github.io)