Vue.js是目前很火的一個前端框架，採用MVVM模式設計，它是以數據驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用，特別適合單頁應用的開發。 ...
Vue.js
Vue.js是目前很火的一個前端框架，採用MVVM模式設計，它是以數據驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用，特別適合單頁應用的開發。
Vue.js是數據驅動的，它通過一些特殊的語法，將DOM和數據綁定起來，無需手動操作DOM。一旦創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。
安裝 vue-cli
Vue 提供一個官方命令行工具vue-cli，可用於快速搭建大型單頁應用。由於vue-cli是基於nodejs進行工作的，所以安裝之前需要確保你的電腦已安裝nodejs環境，完成後就可以安裝vue-cli工具了：npm i vue-cli -g
快速構建vue應用
工具安裝好後使用命令vue init webpack-simple [應用名稱]即可在當前工作目錄下創建一個最基本的vue應用，創建過程中會進行相關應用信息的配置，安裝結果如圖：
這樣一個最基本的vue應用就搭建好了，我們按照提示的命令安裝依賴模塊並啟動，完成後瀏覽器就會彈出應用主頁了
cd myvue
npm install
npm run dev
安裝依賴的過程可能比較慢，可以通過安裝淘寶鏡像解決：
npm install -g cnpm --registry=https://registry.npm.taobao.org，之後安裝依賴時使用cnpm替代npm即可，如：cnpm install
安裝 vue-devtools 調試工具
vue-devtools是一款基於瀏覽器的vuejs應用的調試工具，支持Chrome、Firefox、Safari瀏覽器，用於調試vue應用，可以極大地提高我們的調試效率。
這裡以Chrome瀏覽器為例，介紹vue-devtools的兩種安裝方式：
直接從chrome商店安裝
Get the Chrome Extension
這種最簡單的安裝方式，但前提你懂的 ---- FQ
手動安裝
這種方式稍微麻煩一點，首先我們要將vue-devtools的github項目clone到本地
git clone https://github.com/vuejs/vue-devtools.git然後安裝相關依賴模塊
npm install接著編譯項目
npm run build最後安裝到Chrome瀏覽器中，打開瀏覽器的擴展程式頁面
開啟“開發者模式”，點擊“載入已解壓的擴展程式...”，選擇vue-devtools\shells\chrome文件夾即可完成安裝
使用
我們只需在vue應用頁面點擊F12快捷鍵，即可看見vue-devtools工具了
安裝 postcss-loader
使用css來構建頁面的樣式時，為了考慮瀏覽器相容問題，我們會使用相容性首碼，比較繁瑣，通過postcss就可以在編譯的時候自動補全css代碼的相容性首碼了，不需要我們手動添加
首先我們需要安裝postcss-loader和autoprefixer模塊：npm install postcss-loader autoprefixer -S，接著打開webpack.config.js配置文件，修改以下地方：
然後我們需要單獨創建postcss.config.js配置文件，放在應用根目錄下，文件內容：
好了，我們看一下配置前後的效果吧
本文為作者kMacro原創，轉載請註明來源：https://www.jianshu.com/p/6db27265cf45。
