在上個月份的一次使用vue的專案開發的過程中發現了一個很詭異的現象，就是我在中寫樣式時發現樣式突然間不起作用了，這是為什麼？
填坑步驟
1.當時我首先想到的是快取問題，所以果斷的按住ctrl + shift + del鍵，清除快取，但是我發現‘然並卵’；
2.這時我恍然大悟，我使用的是vue-cli開發者模式，當我修改樣式的話，vue執行環境會及時的幫我重新編譯的，我頓時明白過來，真正的原因並不是這個樣子；
3.由於我當時剛接觸stylus不久，聽一些大牛說這個css前處理器有多麼的優秀，因此就在所做的的專案裡進行嘗試，對於非mvvvm專案我使用了webpack搭建了一個環境對css使用stylus完全沒有問題，而對於mvvm專案是初次嘗試，所以想當然的我就認為是stylus的編譯問題，認為用webpack使用stylus處理css在mvvm專案中存在bug，於是乎想到的就是Google查詢解決方案，很遺憾沒有我想要的結論，這時我想了一個解決方案就是使用sass或者less來處理，由於從我畢業後首先接觸到的是sass，所以，我就將使用stylus風格寫的程式碼改為了sass風格的程式碼，而且也很快的完成了，然後就是輸入npm run dev 命令，結果發現還是原來的效果，當時我的第一感覺就是崩潰?；
4.沒得辦法了，不行，作為一名‘一不怕苦，二不怕累，三……’，豈能被這點小困難難倒，辦法還是有的，開啟chrome瀏覽器的除錯工具，如下圖（pic – 1） 我們單擊‘+’可以新增新的樣式規則body{}在這裡寫入我們所需要的樣式，結果令人很滿意，我到了我想要的結果，但為什麼使用webpack編譯後的結果沒有達到我們所想要的結果呢？
5.接下來，我們所要做的就是排查故障的位置了，在這裡我們要感謝現在的瀏覽器開發商給我們提供的強大工具開發者工具了，廢話不多說進入正題，尋找故障原因；
首先, 按住 Ctrl + shit + c 鍵，單擊滑鼠左鍵選中目的元素，則開發工具皮膚中就會出現目的元素的樣式，然後單擊樣式後面的樣式源地址，皮膚中就會出現正常的樣式的根目錄。檢視相應的的情況。
其次，上面的是我們在做相容性處理，或者樣式查詢，微調時，使用的方法，但在mvvm元件化開發的專案中，你能找到未覆蓋的樣式，但很難找到目的元素樣式的，我們該怎麼辦，很簡單我們只要找該元件中起效的樣式即可。
下面列幾張圖說明一下上面的情況：
專案問題1： 圖示和字型間的艱鉅過大（這個是我在專案中需要解決的問題）
測試問題2：只能找到你要覆蓋的樣式的位置，而不能找到你寫的覆蓋樣式的位置
我們要找的是這樣的樣式的位置
按照慣性思維找到的確是這樣的
最後，我們會發現在樣式中會有這樣的一句程式碼
.dynamic .mu-item.show-left[data-v-5b8a484c] {
padding-left: 56px;
}
如果我們把show-left後的[data-v-5b8a484c]去掉，就會發現效果如我們所需要的那樣,但是我們會發現如果這樣的話我們就會影響其他頁面的樣式，我們的樣式就變成了對整個專案都其作用的樣式，所以，我們現在應該明白了，出問題的地方時哪裡了吧。
結論與總結
問題就在於我們使用的scoped屬性，它的存在可以讓我們的元件的樣式保持獨立性，但同時使用scoped也存在一個問題，就是我們不應該在專案中定義重複的樣式規則名稱。講到這裡scoped的填坑應該結束了，但是我想有部分童鞋可能會有這樣的想法我在做專案時不時用相同的規則名進行樣式覆蓋不就可以了，可是我想說的是我們在專案開發的過程中這樣的問題我們並不能，完全避免，特別是我們使用前端框架進行開發時這種問題就不可避免，說到這裡，我就為大家推薦兩款我是用著比較方便的vue框架，第一個是element UI,muse-ui,再補充一句有逼格的話‘武器雖好，但技術更重要’。
vue框架使用體會
1.要慎用框架，結合自己專案的情況選擇合適的框架;
2.使用框架要充分了解框架，瞭解框架有哪些模組組成，瞭解框架的優缺點，使用框架的優點，迴避框架的缺點，針對框架的不足我們最好要有自己的一套健壯的解決方案，否則慎用；
3.針對第二點，我們在開發的過程中由於考慮不足，或者專案業務的變化，而產生了心得問題，讓框架暴露出了新的問題，我們要有較強的糾錯能力，這時就是考驗我們基本功的時候了，所以，我們要充分的瞭解vue，知曉vue的工作原理，理解vue每個組成部分的意義和作用；
4.由於使用vue-cli開發是一個需要了解webpack，node.js, vue ,以及所使用的vue框架的情況，所以js這一關我們必須過，然後就是，瞭解webpack，node.js,當然node.js是一個很好的容器，裡面包含了各種有趣的外掛，有興趣的童鞋不妨嘗試一下~
最後，送大家一句話‘路漫漫其修遠兮，吾將上下而求索’，努力吧，少年！