vue 填坑系列總結——scoped

在上個月份的一次使用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編譯後的結果沒有達到咱們所想要的結果呢？

pic-1

5.接下來，咱們所要作的就是排查故障的位置了，在這裏咱們要感謝如今的瀏覽器開發商給咱們提供的強大工具開發者工具了，廢話很少說進入正題，尋找故障緣由；

首先, 按住 Ctrl + shit + c 鍵，單擊鼠標左鍵選中目的元素，則開發工具面板中就會出現目的元素的樣式，而後單擊樣式後面的樣式源地址，面板中就會出現正常的樣式的根目錄。查看相應的的狀況。
其次，上面的是咱們在作兼容性處理，或者樣式查找，微調時，使用的方法，但在mvvm組件化開發的項目中，你能找到未覆蓋的樣式，但很難找到目的元素樣式的，咱們該怎麼辦，很簡單咱們只要找該組件中起效的樣式便可。
下面列幾張圖說明一下上面的狀況：

項目問題1： 圖標和字體間的艱鉅過大（這個是我在項目中須要解決的問題）

pic-2

測試問題2：只能找到你要覆蓋的樣式的位置，而不能找到你寫的覆蓋樣式的位置
咱們要找的是這樣的樣式的位置

pic-3

按照慣性思惟找到的確是這樣的

pic-4

最後，咱們會發如今樣式中會有這樣的一句代碼
.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是一個很好的容器，裏面包含了各類有趣的插件，有興趣的童鞋不妨嘗試一下~

最後，送你們一句話‘路漫漫其修遠兮，吾將上下而求索’，努力吧，少年！