1. 程式人生 > >vue專案實戰總結筆記

vue專案實戰總結筆記

公司專案也快接近尾聲,在做專案的過程中,自己也遇到好多坑,個人覺得語法結構規範嚴謹對頁面呈現的效果尤為重要。

  • 確認專案框架
    一般頁面都分為公共的頭部和底部,還有中間渲染的內容。
    主要開始工作:封裝公共部分的元件,確定頁面模組的搭建。

  • 頭部導航不建議使用iview框架進行路由的跳轉。
    主要工作:通過導航子集的id進行路由的切換,以及點選當前導航顯示的樣式,採用迴圈的語法。
    若是固定導航,在body內加入padding-top。

  switch(name){
              case "index":
                //這裡進行顯示和隱藏的內容
                //這裡進行路由的跳轉
break; case "product": //這裡進行顯示和隱藏的內容 //這裡進行路由的跳轉 break; case "power": //這裡進行顯示和隱藏的內容 //這裡進行路由的跳轉 break; }
  • 進行公共樣式的引入
    首先是清除樣式的引入: rest.css
    頁面中要用到的公共樣式: common.scss(檔名自定義)
    (採用公共樣式,對修改框架之類的樣式有所幫助,可以減少樣式汙染);
    使用圖示字型,多用於公共樣式的引入。
    多使用偽類元素: before/after, 對於一些線條的處理。
    或者是清除浮動:(這種方法相容性一般,但經過各種 hack 也可以應付不同瀏覽器了,同時又可以保證html 比較乾淨,所以用得還是比較多的。 )
  #outer:after{ 

   content:"."; 

   height:0; 

   visibility:hidden; 

   display:block; 

   clear:both; 

  } 
  • 對於重複的樣式多使用v-for進行樣式的迴圈,簡化程式碼
    介面總會出現一些重複樣式的展示,多使用v-for迴圈,對後期進行介面的配置有很大的幫助。

  • 使用iview框架時,特別要注意不同頁面同類樣式的修改。
    這算是最坑的地方了,使用對話方塊的時候,路由跳轉就會出現樣式的汙染,當時想到的方法就是 scoped,使樣式單頁面應用私有化,結果樣式全亂了。最終的解決方法就是把框架的類名,包裹在當前介面最外層的類名下,這樣才規範了程式碼。

  • 靈活運用雙向資料繫結

  • 使用svn進行程式碼的更新上傳
    注意先提交之後再進行檔案的更新,不然很容易丟失更改的內容,產生衝突。