第一步驟
當專案做一個圓環進度條的時候，我自己用canvas寫了一個js,並且封裝成函式。當時想到的是直接將函式寫在元件中然後進行呼叫：
報錯了：Uncaught TypeError: Cannot read property ‘getContext’ of null
然後意識到canvas的getContext方法需要在頁面文件載入完成之後才會去觸發識別這個屬性。所以canvas寫的程式碼不能直接放在元件當中。
第二步驟
後面就將canvas的js程式碼寫在外部，然後用在index.html去呼叫，但是發現這樣很麻煩，應該當頁面無論是初始化還是載入某一個元件時候，都會去呼叫這類程式碼，有可能還會報錯。
重點解決方法
後面想了想，能不能將canvas.js作為一個模組在需要引用這個模組的元件中去呼叫它。去往上看了一下這類知識。也找到了方法，之後就是實施起來。canvas.js如下所示：
function loadCanvas(){}
export {loadCanvas};
元件中呼叫 import loadCanvas from ‘loadCanvas.js’
由於我的vue專案是用vue-cli去生成simple版本的，這個時候繼續出錯，報錯程式碼如下： webpack_require.i(…) is not a function。
想想這個時候頭都大了，一個自寫的canvas外掛引入到vue的專案中衍生出這麼多個問題。但是沒辦法，還得解決不是。
然後再命令列npm中去檢視錯誤報告，發現這裡寫圖片描述
當我們引入模組額時候並沒有發現到這個模組，這個我想應該是在canvas匯出的時候出現了問題。我原先用的export 是es6的語法，我不確定它在webpack裡面是否被編譯了，如果沒有我還要去修改webpack.config，這在我看來當前是一件很麻煩的事情，後面我用common.js規範中的module.exports去匯出這個canvas模組，最後這個問題解決了。這是我今天vue遇到的坑，希望大家能夠多提意見，一起進步
第一步驟
當專案做一個圓環進度條的時候，我自己用canvas寫了一個js,並且封裝成函式。當時想到的是直接將函式寫在元件中然後進行呼叫：
報錯了：Uncaught TypeError: Cannot read property ‘getContext’ of null
然後意識到canvas的getContext方法需要在頁面文件載入完成之後才會去觸發識別這個屬性。所以canvas寫的程式碼不能直接放在元件當中。
第二步驟
後面就將canvas的js程式碼寫在外部，然後用在index.html去呼叫，但是發現這樣很麻煩，應該當頁面無論是初始化還是載入某一個元件時候，都會去呼叫這類程式碼，有可能還會報錯。
重點解決方法
後面想了想，能不能將canvas.js作為一個模組在需要引用這個模組的元件中去呼叫它。去往上看了一下這類知識。也找到了方法，之後就是實施起來。canvas.js如下所示：
function loadCanvas(){}
export {loadCanvas};
元件中呼叫 import loadCanvas from ‘loadCanvas.js’
由於我的vue專案是用vue-cli去生成simple版本的，這個時候繼續出錯，報錯程式碼如下： webpack_require.i(…) is not a function。
想想這個時候頭都大了，一個自寫的canvas外掛引入到vue的專案中衍生出這麼多個問題。但是沒辦法，還得解決不是。
然後再命令列npm中去檢視錯誤報告，發現這裡寫圖片描述
當我們引入模組額時候並沒有發現到這個模組，這個我想應該是在canvas匯出的時候出現了問題。我原先用的export 是es6的語法，我不確定它在webpack裡面是否被編譯了，如果沒有我還要去修改webpack.config，這在我看來當前是一件很麻煩的事情，後面我用common.js規範中的module.exports去匯出這個canvas模組，最後這個問題解決了。這是我今天vue遇到的坑，希望大家能夠多提意見，一起進步