vue實戰——對沒見過的東西的科普以及第一次踩坑

一. CSS預處理器

我一開始很疑問。爲何要用vue , 爲何要模塊化，爲何要用css預處理器，這些東西在我目前階段的學習中，還沒法體會他們的實際做用，只能在大佬的博客中找答案... （這個開頭引入 我以爲不錯） https://mp.weixin.qq.com/s?__biz=MzIyMjE0ODQ0OQ==&mid=2651552806&idx=1&sn=7c88a87aa57ca2e14c82df7bb806a378

首先是在講它的產生背景，說是 網頁開發愈來愈複雜，原生 CSS 已經讓開發者力不從心 不太能理解這裏說的 有的網頁環境太複雜 支持不來CSS ，可是在別人的博客看到一種想法 是可以理解的 CSS擁有對網頁對象和模型樣式編輯能力，可是它不算是編程，它並不像其它程序語言，好比說PHP、Javascript等等，有本身的變量、常量、條件語句以及一些編程語法 【 這裏說一點，我以前一直都不知道，原來css也能夠定義變量... 只是我不知道而已，因此定義本身的變量這個其實css是能夠作到的 請自行百度 】 因此咱們其實可以看到 CSS預處理器 確實有編程的元素在了，讓CSS能像其餘程序語言同樣能夠作一些預約的處理。

什麼是CSS預處理器

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增長了一些編程的特性，將CSS做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做。通俗的說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，而後再編譯成正常的CSS文件，以供項目使用。CSS預處理器爲CSS增長一些編程的特性，無需考慮瀏覽器的兼容性問題，例如你能夠在CSS中使用變量、簡單的邏輯程序、函數等等在編程語言中的一些基本特性，可讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。

再來看它的幾個特色
感受文件切分跟模塊化是一體的，差很少的。 一個樹狀結構仍是很形象的。
選擇符嵌套的話 能很清楚的看出來層級，我一開始還沒看出來，可是仔細一想，其實它是用縮進的層級，代替了後代選擇器的一個寫法，因此對於代碼的一個嚴謹性就要求很高了

//舉例是stylus 
   .nav
    margin: auto  // 水平居中
    width: 1000px
    color: #333
    li
        float: left  // 水平排列
        width: 100px
        a
            display: block
            text-decoration: none

   a
      color:red

好比 如上代碼 後面那個a 就跟前面的a 不同了 一個是.nav li a 的選擇器 一個就是 全部的 a

變量 比較適合你們一塊兒開發的時候，咱們定一個一整個規則，就很好，特別是像字號這種，不是說我這個時候看着什麼字號舒服就能夠的，這樣會致使我兩個頁面一切換emm..好像不太同樣的感受，因此這個時候就能夠規定一下 好比說 font-size-small-s = 10px / $font-size-small = 12px; / $font-size-medium = 14px; 這樣的就很好了
運算就感受好像有點麻煩，可是能讓別人讀懂你的代碼，而不是我本身把這個地方的一個像素直接算好了，而是別人看到了個人一個計算過程也知道我這個是怎樣一個東西。 函數 這個東西就特別的編程化啦
Mixin 就很神奇，某段CSS樣式常常要用到多個元素中，這樣你就須要重複的寫屢次。在CSS預處理器語言中，你能夠爲這些公用的CSS樣式定義一個Mixin，而後在你CSS須要使用這些樣式的地方直接調用你定義好的Mixin。首段放的那個 博客裏的那個例子就挺好的 ，雖然感受好像差很少哈，可是就是感受好像有點點意思.. 菜雞暫時用不到 ， 因此不知道如何體會
工程化的話，有打包工具，因此~~

二. fastclick

https://www.jianshu.com/p/67bae6dfca90

看上述博客就很清楚是 移動設備上的瀏覽器默認會在用戶點擊屏幕大約延遲300毫秒後纔會觸發點擊事件，這是爲了檢查用戶是否在作雙擊【 300毫秒延遲主要緣由就是來自雙擊縮放 蘋果公司在2007 年初發布首款 iPhone 前夕，由於不少網站都是針對大屏幕的。因而蘋果的工程師們作了一些約定，應對 iPhone 這種小屏幕瀏覽桌面端站點的問題。就讓它 用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。 】。爲了可以當即響應用戶的點擊事件，纔有了FastClick。 而後也沒多的別的 就install 就行了 。就是本身科普一下。。。

三 . 踩坑

有以下幾個要注意的幾個小點：
首先，命名要仔細認真，我命名的時候，把「reset.styl」 命名成了 「 reset.styl」 。 即 有個空格！！致使我import的時候，沒有import到「reset.styl」 報錯以下

還有有個很蠢的錯誤，就是 寫reset的時候，由於連着寫了好多個標籤，打逗號打習慣了，最後一個標籤後頭也打了個逗號

重磅來了！！血的教訓，語法的標準性很重要！！ eslint真的害死人！

(1)   ✘  http://eslint.org/docs/rules/no-multiple-empty-lines  More the not allowed
             src\components\m-header\m-header.vue:47:1

               ^

      這就是有空行問題( 空行的數量是有配置文件能夠設定的 超過了設定的值就會報這個錯 )


(2)
  ✘  http://eslint.org/docs/rules/no-trailing-spaces       Trailinllowed
       src\components\m-header\m-header.vue:48:1

     ^

            不容許在語句後存在多餘的空格


(3)
✘  http://eslint.org/docs/rules/quotes  Strings must use singleq
     src\App.vue:8:21
     import MHeader from "./components/m-header/m-header.vue"
                                       ^

            這個是我以爲最過度的！！ 不能用雙引號，天了嚕 太吹毛求疵了 當時差點想把eslint關掉
    

(4)
  ✘  http://eslint.org/docs/rules/spaced-comment  Expected space o/' in comment
       src\main.js:3:25
       import 'babel-polyfill' //這個要寫在最開始
                                      ^

             這個也有點過度， 「//」註釋符號後邊要有空格  = =   無語

語法bug大概就出了這四個， 可是爲了之後找錯方便，本人找到了一個還比較全的Eslint規則說明 碼住！！

https://blog.csdn.net/helpzp2008/article/details/51507428

除了這個bug 再就是一個很基礎的，教程視頻裏有寫的

This dependency was not found:

* components/m-header/m-header.vue in ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/App.vue

To install it, you can run: npm install --save components/m-header/m-header.vue

這就是一個./的問題 要加上這個‘’./ ‘’ 通常不加沒啥區別，可是在這裏有了區別， 是一個別名設置的問題 ，能夠把components 配置全了就行了