參考
[https://www.jianshu.com/p/4618844c5df8]搭建Vue項目過程中遇到的一些問題
.NET後端工程師的全棧轉型之路 前端小白 不定期更新 有問題望大佬指正
寫在前面
由於npm官方源實在太慢，所有修改registry爲淘寶鏡像
// 淘寶源
npm config set registry https://registry.npm.taobao.org/
// 驗證是否配置成功
npm config get registry
// 原始源 bak
npm config set registry https://registry.npmjs.org/
No.1
執行npm install時報錯（Step1），後來發現在vue init用的是vue init webpack project_name，也就是基於webpack模版的項目，然後我沒有安裝webpack，安裝後問題解決
// 全局安裝 webpack
npm install webpack -g
// 安裝 webpack-cli
npm i -g webpack-cli
// 查看 webpack 版本
webpack -version
No.2
配置sass時終端報錯（Step4），但是博主給出瞭如下的解決方案
// 安裝 sass-loader
npm install sass-loader --save
// 安裝 node-sass
npm install node-sass --save
但是我按照上述的方法安裝後，還是報錯this.getResolve is not a function at Object.loader，原因是我的sass-loader的版本太高，導致webpack編譯時出錯，此時找到package.json文件夾，修改sass-loader的值爲^7.3.1（我的原始版本爲^8.0.0），然後執行npm install，再執行npm run dev問題解決
No.3
倉庫存儲store搭建完畢後（Step10）終端報錯Can't resolve 'vuex'...，原因是缺少Vuex，安裝後問題解決
// 安裝 Vuex
npm install --save vuex
No.4
側邊菜單狀態保存（Step11）Chrome瀏覽器Console報錯The computed property "sidebar" is already defined in data，原因是data裏已定義，註釋後問題解決
此處Chrome瀏覽器Console仍報錯Invalid handler for event "toggleSideBar": got undefined和Property or method "toggleSideBar" is not defined on the instance but referenced during render...，最終發現是因爲head-top裏用到了toggleSideBar，刪掉即可
No.5
完善消息列表（Step21）Chrome瀏覽器Console報錯Cannot read property 'messages' of undefined導致界面並未加載出數據，原因是src/store/index.js中沒有引用common，添加引用後即可
No.6
完善消息列表（Step21）完善後發現圖片都加載失敗，所以就準備引用本地的資源文件，但是發現圖片並不能成功加載
// 錯誤示例 ✖ 這種方法是不可以的 ✖
image: "../../assets/images/touxiang.jpg"
// 正確示例 ✔
image: require("../../assets/images/touxiang.jpg")
Oth.1
2019.12.22記錄
項目遷移至新電腦npm install時報錯Can't find Python executable "python", you can set the PYTHON env variable.，原因是缺少python環境，管理員身份運行cmd，執行如下代碼後重新npm install即可
npm install --global --production windows-build-tools