初次使用vue寫專案的一些經驗
最近用vue正在寫一個專案，本來以為vue很簡單，但是還是發現是有一些坑在裡面，現在邊寫邊進行總結。
首先遇到的就是頁面中img中標籤的圖片src的載入問題，我開始以為是圖片應該和元件放在一塊，但是發現不行，總是報錯。
./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-0d4c5d14!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/SkuPop.vue
Module not found: Error: Can't resolve './icon_close.png' in 'E:\code\bookShoping\bookShop\src\components'
@ ./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-0d4c5d14!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/SkuPop.vue 6:963-990
@ ./~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-0d4c5d14!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/SkuPop.vue
@ ./src/components/SkuPop.vue
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/detail.vue
@ ./src/components/detail.vue
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi main
大概就是這個樣子，然後排查了半天，把img資料夾放在可能是目標路徑的地方一個一個試結果讓我發現了應該放到和根目錄的index.html檔案放在同一級目錄下，這樣就沒問題了，因為會預設插入html，所以路徑是按htmlj頁面計算的。這個問題解決了，有來第二個問題。
第二個問題還是因為路徑的原因，這個時候是在css中引用了背景圖片，就是這樣background-image: url(img/icon_close.png);，然後webpack編譯不通過，也不行，然後也是一個一個排查，發現要把img資料夾放在和使用這個圖片的元件同級目錄下，而不是根目錄下就行了，思考了一些，這裡因為css被打包了進去js檔案裡面，所以路徑也是在裡面，而這個背景圖片是在那個元件裡面，所以找的時候會去找這個元件所在的目錄，然後再去找這個檔案。而上一個因為裡面template中的html會被編譯進html中所以img的路徑會按照根目錄，也就是index.html的同級目錄下找。
然後又出現了一個問題，就是在當我使用webp格式的圖片的時候又進行報錯了，報錯資訊的大概是loader的問題，所以我就想到是不是webpack有問題，然後去找webpack中
{
test: /\.(png|jpe?g|gif|svg|webp)(\?\S*)?$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}
原來test中沒有webp格式的，然後是我後來加上去的，因為test是一個正則表示式，沒有webp的話，他就不能把檔案也作為模組打包成功，所以就出現了報錯，然後這個問題就解決了。
在使用props像子元件傳遞資料的時候，使用v-bind傳遞的就是javaScript表示式，要不然就是字串了（就不能動態變化了），所以再在此建議一下，還是要在子元件裡面寫props的時候驗證一個數據型別。
下面就是一個問題，我引入第三方的一個js處理函式，然後該怎麼在vue中使用的問題，