vue & vuex 02 - 使用Vue | webpack vue教學
開始之前請先安裝node.js[1]Vue-cli最低版本需求:(重要)最新版Vue-cli使用了vue2.1原本電腦一直使用nodev4.4.3即使安裝了npm3也是run不起來。目前版本:node-vv6.9.2npm-v3.10.9什麼Vue-cli?vue-cli[2]可以說是作者開發的vue懶人開發包,裡面包含有5種結構,從最基礎的simple到browserify以及webpack版本皆可以自由選擇。安裝vue-cli在commandline介面中執行:npminstall-gvue-cli-g是npm安裝語法將套件安裝在全域環境的意思。npm(內建)是node.js安裝套件的管理工具之一,其他還有facebook的YARN安裝webpack在commandline介面中執...
開始之前請先安裝 node.js[1]
Vue-cli 最低版本需求:(重要)最新版 Vue-cli 使用了 vue 2.1原本電腦一直使用 node v4.4.3 即使安裝了 npm 3 也是 run 不起來。
目前版本: node -v v6.9.2 npm -v 3.10.9 什麼 Vue-cli ?vue-cli[2] 可以說是作者開發的 vue 懶人開發包,裡面包含有 5 種結構,從最基礎的 simple 到 browserify 以及 webpack 版本皆可以自由選擇。
安裝 vue-cli 在 command line 介面中執行: npm install -g vue-cli-g 是 npm 安裝語法將套件安裝在全域環境的意思。npm(內建) 是 node.js 安裝套件的管理工具之一,其他還有 facebook 的 YARN
安裝 webpack 在 command line 介面中執行: vue init webpack your-project-nameyour-project-name -> 只需命名你喜歡的 project 名稱,cli 將會幫你產生此資料夾,並安裝你選定的結構。
為什麼選用 webpack ?主要想使用 Hot-loader 功能體驗快速反應的開發系統,與最新的自動化建構工具。
什麼是 Hot-loader ?你可以想像成 live-reload 的進階版本,Hot-loader 會直接在畫面上更新,改變你剛剛改好的程式碼。
比較圖: 套件 功能 畫面更新 資料重新 load live-reload 幫你按 F5 是 資料須重新 key Hot-loader 直接更新程式 是 資料會存在想像一下我們開發一個功能,更改了顏色,我不需要從登入開始一步一步點到那個畫面,按下存檔的瞬間,它就幫我把顏色更新上去了!
webpack 開發包選項:因為我們的目標是 學習 vue 因此,我們將不選擇安裝 test 與 coding style.
...