1、安裝一些需要編譯的包：提示沒有安裝python、build失敗等
因為一些 npm 的包安裝需要編譯的環境，mac 和 linux 都還好，大多都齊全 。window 用戶依賴 visual studio 的一些庫和python 2+，windows的小伙伴都裝上：
2、can't not find 'xxModule' - 找不到某些依賴或者模塊
這種情況一般報錯信息可以看到是哪個包拋出的信息。一般卸載這個模塊，安裝重新安裝下即可。
3、data functions should return an object
這個問題是 Vue 實例內，單組件的data必須返回一個對象。
為什么要 return 一個數據對象呢？
官方解釋如下: data 必須聲明為返回一個初始數據對象的函數，因為組件可能被用來創建多個實例。如果 data 仍然是一個純粹的對象，則所有的實例將共享引用同一個數據對象！簡言之，組件復用下，不會造成數據同時指向一處，造出牽一發而動全身的破問題。
4、給組件內的原生控件添加事件不生效
<!--比如用了第三方框架,或者一些封裝的內置組件; 然后想綁定事件--> <!--// 錯誤例子1-->
<el-input placeholder="請輸入特定消費金額 " @mouseover="test()"></el-input>
<!--// 錯誤例子2-->
<router-link :to="item.menuUrl" @click="toggleName=''">
<i :class="['fzicon',item.menuIcon]"></i>
<span>{{item.menuName}}</span>
</router-link>
<!--上面的兩個例子都沒法觸發事件!!!--> <!--究其原因,少了一個修飾符 .native-->
<router-link :to="item.menuUrl" @click.native="toggleName=''">
<i :class="['fzicon',item.menuIcon]"></i>
<span>{{item.menuName}}</span>
</router-link>
<!--明明官方文檔有的,一堆人不願意去看--> <!--https://cn.vuejs.org/v2/guide/components.html#給組件綁定原生事件-->
5、在函數內用了this.xxx=，為什么拋出Cannot set property 'xxx' of undefined;
需要this重定向
這又是this的套路了，this是和當前運行的上下文綁定的。一般你在axios或者其他 promise , 或者setInterval 這些默認都是指向最外層的全局鈎子。簡單點說：“最外層的上下文就是 window，vue內則是 Vue 對象而不是實例!”;
解決方案：
（1）暫存法：函數內先緩存 this , let that = this;(let是 es6, es5用 var)
（2）箭頭函數：會強行關聯當前運行區域為 this 的上下文。
6、為什么我的引入的小圖片渲染出來卻是 data:image/png;base64xxxxxxxx
這個是 webpack 里面的對應插件處理的。對於小於多少 K 以下的圖片(規定的格式)直接轉為 base64格式渲染；具體配置在webpack.base.conf.js里面的 rules里面的 url-loader。這樣做的好處：在網速不好的時候先於內容加載和減少http的請求次數來減少網站服務器的負擔。
7、Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx
大體就是說，單組件渲染 DOM 區域必須要有一個根元素，不能出現同級元素。可以用v-if和v-else-if指令來控制其他元素達到並存的狀態。
換個直白的解釋，就是有一個唯一的父類包裹者；比如一個 div(父包含塊) 內部多少個同級或者嵌套都行，但是最外層元素不能出現同級元素。
8、跨域問題怎么破!比如No 'Access-Control-Allow-Origin' header is present on the requested resource.
這種問題老生常談了，我就不細說了，大體說一下：
（1）CORS ，前后端都要對應去配置，IE10+
（2）nginx 反向代理，一勞永逸，線上環境可以用這個
線下開發模式，比如你用了vue-cli，里面的 webpack 有引入了proxyTable這么個玩意，也可做接口反向代理
// 在 config 目錄下的index.js
proxyTable: { "/bp-api": { target: "http://new.d.st.cn", changeOrigin: true, // pathRewrite: { // "^/bp-api": "/" // }
} } // target : 就是 api 的代理的實際路徑 // changeOrigin: 就是是變源,必須是... // pathRewrite : 就是路徑重定向,一看就知道
9、為什么我的組件間的樣式不能繼承或者覆寫？
單組件開發模式下，請確認是否開啟了 CSS模塊化功能。也就是scoped(vue-cli 里面配置了，只要加入這個屬性就自動啟用)
<style lang="scss" scoped></style>
為什么不能繼承或者覆寫呢，那時因為每個類或者 id 乃至標簽都會給自動在css后面添加hash。比如
// 寫的時候是這個
.trangle{} // 編譯過后,加上了 hash
.trangle[data-v-1ec35ffc]{}
這些都是在 css-loader 里面配置。
10、路由模式改為history后，除了首次啟動首頁沒報錯，刷新訪問路由都報錯。
必須給對應的服務端配置查詢的主頁面，也可以認為是主路由入口的引導。
官方文檔也有：傳送門 : Vue-Router history Mode
11、Uncaught ReferenceError: xxx is not define
實例內的 data 對應的變量沒有聲明，你導入模塊報這個錯誤，那絕對是導出沒寫好，按着導出導入的一個一個去找，絕對能找到問題。
12、Error in render function:"Type Error: Cannot read property 'xxx' of undefined"
這種問題大多都是初始化的姿勢不對；比如引入echart這些，仔細去了解下生命周期，再來具體初始化。
vue 組件有時候也會(嵌套組件或者 props傳遞初始化)，也是基本這個問題
13、安裝模塊時命令窗口輸出unsupported platform xxx
一般兩種情況，node版本不兼容，系統不兼容。解決方案: 要么不裝，要么滿足安裝要求。
14、Unexpected tab charater這些
一般是你用腳手架初始化的時候開了 eslint ，要么遵循規則，要么改變規則；要么直接把 webpack 里面的 eslint 檢測給關閉了。
15、Failed to mount component: template or render function not defined
組件掛載失敗，問題只有這么幾個：組件沒有正確引入、掛載點順序錯了了；自行動手排查。
16、Unknown custom element: <xxx> - did you register the component correctly?
組件沒有正確引入或者正確使用，依次確認：
（1）導入對應的組件
（2）在 components 內聲明
（3）在 dom 區域聲明標簽
17、axios的 post 請求后台接受不到
axios默認是 json 格式提交，確認后台是否做了對應的支持。
若是只能接受傳統的表單序列化，就需要自己寫一個轉義的方法。當然還有一個更加省事的方案，裝一個小模塊qs
//安裝
npm install qs -S // 然后在對應的地方轉就行了，單一請求也行,攔截器也行，我是寫在攔截器的。 //POST傳參序列化(添加請求攔截器)
Axios.interceptors.request.use( config => { // 在發送請求之前做某件事
if ( config.method === "post" ) { // 序列化
config.data = qs.stringify(config.data); // 這里轉義
} // 若是有做鑒權token , 就給頭部帶上token
if (localStorage.token) { config.headers.Authorization = localStorage.token; } return config; }, error => { Message({ showClose: true, message: error, type: "error.data.error.message" }); return Promise.reject(error.data.error.message); } );
18、Invalid prop: type check failed for prop "xxx". Expected Boolean, got String.
這種問題一般就是組件內的 props 類型已經設置了接受的范圍類型， 而你傳遞的值卻又不是它需要的類型，寫代碼嚴謹些。
19、this.$set | this.$xxx 這個 $ 是個什么意思
Vue 的$和 jQuery 的$並沒有半毛錢的關系，就跟javascript和java一樣。
Vue 的$是封裝了一些 vue 的內建函數，然后導出以$開頭，這顯然並不是 jQuery的專利。
jQuery 的$是選擇器，取得 DOM區域。兩者的作用完全不一致。
20、Module not found: Error : Can’t resolve xxx-loader in xxxx
這里問題一般就是webpack的配置文件你改動了或對應的 loader 沒有裝上
21、父組件可以直接調用子組件的方法么!
可以，通過$refs或者$chilren來拿到對應的實例，從而操作。
22、Error in event handler for "click":"xxx"
這個問題大多都是你寫的代碼有問題，你的事件觸發了，但是組件內部缺少對應的實現或者變量，所以拋出事件錯誤。解決方案：看着報錯慢慢排查
23、組件的通訊有哪幾種？
基本最常用的是這三種;
（1）父傳子: props
（2）子傳父: emit
（3）兄弟通訊:
1>event bus: 就是找一個中間組件來作為信息傳遞中介
2>vuex: 信息樹
傳送門：
24、既然localStorage和sessionStorage能做到數據維護，為什么還要引入vuex!
這個問題問得好，Vuex的目的用來維護同級組件間的數據通訊，擁有一個共同的狀態樹；僅僅活在SPA的里面的偽多頁(路由)內，這種東東明明然localStorage和sessionStorage 也可以做到，還能做到跨頁面數據維護，還不會被瀏覽器刷新干掉。為什么還要引入 vuex，我個人覺得原因只有這么一個，“可維護性”和”易用性”，
怎么理解呢?
（1）可維護性：因為是單向數據流，所有狀態是有跡可循的，數據的傳遞也可以及時分發響應
（2）易用性：它使得我們組件間的通訊變得更強大，而不用借助中間件這類來實現不同組件間的通訊
而且代碼量不多，若是你要用 ls或者ss，你必須手動去跟蹤維護你的狀態表，雖說可行，但是代碼量會多很多，而且可讀性很差。
是不是每個項目都需要用到vuex?
答案是否定的，小型項目上這個反而是累贅，這東西一般是用在中型項目+的，因為里面涉及需要維護的數據比較多，同級組件間的通訊比較頻繁。若是用到vuex的項目記得結合ss或者ls來達到某些狀態持久化，為什么看下面!
25、vuex的用戶信息為什么還要存一遍在瀏覽器里(sessionStorage or localStorage)
因為 vuex的 store 干不過刷新啊，保存在瀏覽器的緩存內，若用戶刷新的話，值再取一遍唄。
26、npm run dev 報端口錯誤：Error: listen EADDRINUSE :::8080
自己用 webpack搭腳手架的都不用我說了，Vue-cli 里面的 webpack 配置: config/index.js
dev: { env: require("./dev.env"), port: 8080, // 這里，若是這個端口已經給系統的其他程序占用了，需要改掉
autoOpenBrowser: true, assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { "/bp-api": { target: "http://new.d.st.cn", changeOrigin: true, // pathRewrite: { // "^/bp-api": "/" // }
} },
原因：8080端口被占用，不輕易關閉被占用的端口，將index.js文件中的port改為其他的端口號即可
在一個就是如果你的host是采用ip形式寫的話，那么你就要看下你電腦的ip是不是一致的
27、什么時候用v-if，什么時候用 v-show!
我們先來說說兩者的核心差異：
v-if：DOM 區域沒有生成，沒有插入文檔，等條件成立的時候才動態插入到頁面。
有些需要遍歷的數組對象或者值，最好用這貨控制，等到拿到值才處理遍歷，不然一些操作過快的情況會報錯，比如數據還沒請求到。
v-show：DOM 區域在組件渲染的時候同時渲染了，只是單純用 css 隱藏了。
對於下拉菜單、折疊菜單這些數據基本不怎么變動，用這個最合適了，而且可以改善用戶體驗，因為它不會導致頁面的重繪，DOM 操作會。
簡言之：DOM結構不怎么變化的用v-show，數據需要改動很大或者布局改動的用v-if。
28、單組件中里面的 import xxx from '@/components/layout/xxx'中的@是什么意思？
這是 webpack 方面的知識，看到了也說下吧。webpack可以配置alias(也就是路徑別名)，玩過 linux 或者 mac 都知道，依舊如上，會自己搭腳手架的不用我說了，看看 vue-cli 里面的，文件名: build -> webpack.base.conf.js
resolve: { extensions: [".js", ".vue", ".json"], // 可以導入的時候忽略的拓展名范圍
alias: { vue$: "vue/dist/vue.esm.js", "@": resolve("src"), // 這里就是別名了,比如@就代表直接從/src 下開始找起!!!
"~": resolve("src/components") } },
29、Failed to compile with x errors : This dependency was not found !
編譯錯誤，對應的依賴沒找到。
解決如下:
（1）知道缺少對應的模塊，直接裝進去
（2）若是一個你已經安裝的大模塊(比如 axios)里面的子模塊(依賴包)出了問題，卸載重裝整個大模塊。因為你補全不一定有用。
30、為什么我的 npm 或者 yarn 安裝依賴會生成 lock文件，有什么用!
lock 文件的作用是統一版本號，這對團隊協作有很大的作用。若是沒有 lock 鎖定，根據package.json里面的^,~這些，不同人、不同時間安裝出來的版本號不一定一致，有些包甚至有一些breaking change(破壞性的更新)，造成開發很難順利進行!!!
31、我有個復雜組件需要有新增和編輯的功能同時存在，但是字段要保持不變性怎么破
字段保持不變性怎么理解呢? 就是說比如新增和編輯同時共享一份 data。
有一種就是路由變了，組件渲染同一個(不引起組件的重新渲染和銷毀!)，但是功能卻不同(新增和編譯)。比如從編輯切到新增，data必須為空白沒有賦值的，等待我們去賦值。這時候有個東西就特別適合了，那就是immutable-js，這個東西可以模擬數據的唯一性，或者叫做不變性。
32、Vue PC(桌面)端、M(mobile:移動)端，用什么 UI 框架好？
PC：推薦的只有兩個 element UI和iview
Mobile：推薦Vux
當然還有很多，但是基本用戶的認知度都不高，這三個比較流行