最近研究了下Vue這個前端框架，不得不說這個前端框架很是厲害。不過對於習慣了jQuery的我來說，剛上手那會兒還是踩了很多的坑啊。那會兒覺得天啊，這個Vue框架特別的繞，並且也更復雜。不過待我寫了幾天之后又覺得，這個Vue還是挺好的，做的了前后端分離，，並且把前端分成了一個個的組件，變得更加靈活。下面直接上干貨，告訴大家我踩的一些坑，來幫助初學者跳過這坑！
一、如何起一個Vue項目( Vue 2.0)
1.安裝好node.js 這個請自行百度下載 安裝還之后 npm也已經自動裝好，這個工具很重要，這是用來安裝項目所依賴的包的
2.安裝webpack 一個打包工具
npm install webpack -g 全局安裝
3.安裝腳手架工具
npm install webpack-cli -g 全局安裝
4.初始化你的Vue項目
vue init webpack mysite(你的項目名)
5.切到你的項目文件夾路徑下
cd mysite
6. npm install (關鍵：vue 時時刻刻不忘安裝依賴！！！)
7.npm run dev
這時候你看到這個圖片的時候說明你的第一個Vue項目跑起來了，然后 把后面紅圈里面的網址復制到瀏覽器 你就可以看到下面的畫面
那到這里我們的第一個Vue項目就起來了，老鐵還看啥 趕緊搞起來吧。。。
二、踩坑
既然我們的Vue項目起來了 那我們就來踩坑了，這里推薦兩個前端的編輯器 Sublime 和 Vscode
這就是一個Vue項目的目錄結構 ，如果想了解每個文件目錄的詳細信息請點擊對點我就行
我們自己寫一都是在src那個文件夾里面寫，在這里友情提示一下 如果你寫着寫着突然要去安裝別的什么依賴包，就得打開cmd窗口 按Ctrl+c 結束程序 然后再去npm install 你需要的包 再重新運行npm run dev
好了 我們來踩坑：
1.如何導入jQuery
1.還是先要安裝jQuery 按上述方法安裝
2..找到項⽬目中webpack.base.config.js
先加上下面這句話 聲明常量
const webpack = require('webpack')
然后再加上下面這幾句代碼
plugins:[
new webpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
jquery:'jquery',
'window.jQuery':'jquery'
})
],
3.然后在main.js
加上這句話 這樣你就可以再全局引用jQuery了
2.組件的問題
Vue這個框架就是把網頁分成很多個組件來寫，但凡涉及到多個組件 就要涉及下面幾個問題
父組件傳值給子組件
子組件傳值給父組件
組件之間的傳值
這些都有坑的地方 下面我就來和大家介紹都那些坑
父組件傳給子組件傳值
子組件肯定會這么寫 這兩個點要注意
一定別忘了在子組件中申明傳入值得類型
我們再來看下父組件中怎么寫
寫for方法的時候最好把v-key也寫上 這樣比較規范 同時因為子組件也是組件，在父組件里面調用的時候記得引用 並且在components里面注冊
子組件給父組件傳值
子組件在向父組件發出時間的時候還可以拋出一個值 這時候父組件可以用$event 來 捕獲到子組件傳過來的值
若是想觸發組件中的原生事件 請在 原生事件名后面加上.native
組件之間的傳值
組件間的傳值算是這三種情況里面的難點了。難雖難，但是這個坑我們一定得爬過去。。哈哈
必須用到Vue生命周期函數的mounted函數 和bus 對象 ，如果是在Vue框架中的話，只需要把兩個組件分開就好，但是分開他們還需要有一個父組件。
3.計算屬性和方法屬性 也即是computed和methods 方法的區別
我們先看下官方的解釋：
很明顯 這個計算屬性若是你的數據沒有發生改變那么他就每次直接去緩存中那結果這樣速度很快，但是如果我們向獲取當前時間 ，用計算屬性那么久有問題了，比如圖中的例子。
圖中說的不希望有緩存，就是那種時刻發生變化的數據。。。。
什么時候用methods 和computed 還是看需求啊。
4.當有多個路由的時候，在主頁面通過循環來展示每個路由，並且還可以添加一些別的屬性
寫里有一定別忘還有一個出去的標簽
以上就是最近所踩的坑，后續踩坑會持續更新，盡請關注。。。
