1.學習使用vue.js（適合初學者）
如果你不願意多花時間去自學vue.js 官網的API，那麼你可以在跟著下面的例子學習最實用，最容易上手的案例。
首先要你必須要去VUE官網上下載vue.js，然後才能繼續下面的步驟。 如果你不想下載的話，在有網路環境的情況下，也可以選擇絕對路徑的vue.js。
如果你想學習如何搭建webpack腳手架，那麼請直接滑動到安裝vue-cli
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 1 當然，和vue的官網一樣，不推薦新手直接安裝vue-cli 因為那樣很容易把你繞暈。當然，如果你對node.js的構建工具比較熟悉的話，也可以直接安裝vue-cli
下面正式進入vue的學習：
首先你引入了vue.js
<script src="./vue.js"></script> 1 然後你需要在html裡面寫一個大的盒子用來寫你的整個vue的專案。
<div id="app"></div> 1 然後和vue建立關聯
<script> new Vue({ el : '#app', data(){ return { msg:'aaa' } }, methods:{//methods 存放fn的地方； run(){ alert('run') }, hover(){ alert('hover') } }, mounted(){//相當於js裡的window.onload this.run();//直接呼叫run函式； console.log(this) } }); </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 下一篇：宣告式渲染 和 指令繫結 http://blog.csdn.net/heshuaicsdn/article/details/79196678
安裝使用vue-cli （不推薦新手使用！如果想要試用vue腳手架，那麼還是先去JS裡熟悉熟悉VUE的相關方法，再來使用vue-cli會輕鬆許多，如果你以前使用過其他框架（如wx小程式），對你使用vue-cli有很大幫助）
首先，你需要下載安裝node.js，如果你不確定安裝沒安裝過node，執行node -v檢視版本。如果沒有顯示
那麼你就必須去https://nodejs.org/en/ 下載安裝node.js 然後才能進行下面的操作；
在網上有好多版本，有直接用npm安裝的，也有用cnpm安裝的，有用webpack-simple的，也有用webpack的，我先說說安裝webpack-simple（就是簡易版的webpack,他需要自己配置路由，某些方面不如webpack相容好）
安裝vue-cli詳細過程： 搭建webpack腳手架 1.新建一個目錄；（為了方便，我就直接建在了桌面） 然後cd進入這個目錄； 2.進入目錄後像VUE官網說的： 只需要執行： npm install vue 安裝最新版的vue
3.然後還要安裝腳手架：vue-cli（VUE的腳手架工具） npm install -g vue-cli 安裝好後可以執行vue list 來看看我們可以用哪些模版；
4.新建專案目錄： 如果你用webpack-simple模版可以執行： vue init webpack-simple hellovue
如果你用webpack模版可以執行：(推薦使用，不過下載過程會比webpack-simple長) vue init webpack hellovue
這裡舉得例子是“hellovue”，你可以寫你自己的專案名稱 1
然後出現了一些選項： 需要注意的是有一個問你是否使用 ESlint 語法，你選擇no(因為這是一個更為嚴謹的語法，你如果程式碼風格不是特別嚴謹，最好還是選擇no) 然後其他都是yes,一路回車…
然後靜靜的等待下載完成…
下載好後根據提示執行命令：
5.cd hellovue 如果沒有依賴環境，執行 npm install 安裝依賴；
6.執行 npm run dev
把紅線部分，複製到瀏覽器的localhost 裡；
要注意一下：package.json檔案
這裡的”vue”和“vue-router”是我們下載的包。
如：下載vue-router（路由）的時候：
npm install vue-router -S 1 當下載好以後，在你檢視“package.json”裡會多一個“vue-router” --------------------- 作者：heshuaicsdn 來源：CSDN 原文：https://blog.csdn.net/heshuaicsdn/article/details/78949376