天天看點

vue項目架構

一、工程說明:

      1.代碼git倉庫位址:

git@gitlab.

*****.git。

      2.目錄結構:

                     1>.index.html 為build打包釋出網頁入口;

                     2>.lieda檔案夾代碼項目工程目錄;

                     3>.static為build打包釋出網頁入口通路資源;

      注意:不是釋出勿動index.html和static檔案,勿在該層級目錄下引入任何資源

       3.開發打開leida項目工程進行開發。

       4.git中test分支為測試環境;master為線上環境分支;

二、工程注意事項:

       1.拉下分支更新資源檔案:cnpm install

       2.接入第三方庫(在package.json—>dependencies中添加可省去此步驟):

                          1>.Mint-ui H5開發快速內建組建;

                          2>.base64-js-codec加密;

                          3>.fastclick輕按兩下事件(位址:http://www.cnblogs.com/yexiaochai/p/3442220.html);

                          4>.font-awesome一套絕佳的圖示字型庫和css架構;

                          5>.js-cookie緩存;

                          6>. Lodash封裝了諸多對字元串、數組、對象等常見資料類型的處理函數;    

                          7>.normalize.css讓所有的浏覽器上對于未定義的樣式浏覽效果達到一緻;

                          8>.promise異步操作,有三種狀态:Pending(進行中)、Resolved(已完成,又稱 Fulfilled)和 Rejected(已失敗);

                          9>.store.js輕松實作本地緩存(位址:http://www.cnblogs.com/lhb25/p/store-js-for-localstorage.html);

                          10>.vue-router路由跳轉;

                          11>.animate.css動畫;

                          12>.vue;

三、工程目錄結構:

      1.src問開發中檔案目錄,

           下:

apis檔案夾(所有的網絡請求檔案)

      —>根據不同需求功能建立不同的檔案夾例如:advert檔案夾;

      —>utils檔案夾網絡底層請求封裝;

assets檔案夾:放圖檔資源,

  —>下根據不同的頁面建立不同的檔案夾再放入資源圖檔; 

components檔案夾:公用封裝組建,

—>根據功能劃分建立功能檔案夾然後建立組建; 

filters檔案夾:處理業務顯示js檔案,例如(處理職位類型,公司規模,時間顯示的js檔案):

export let genderRequired = function(id){

  if(id==0){

    return "不限"

  }else if(id==1){

    return "男士優先"

  }else if(id==2){

    return "女士優先"

  }else{

    return "";

  }

routers:路由配置檔案;

views:頁面代碼檔案

—>根據不同的業務建立檔案夾!

styles:不同的css樣式封裝;

 四、打包釋出流程;

        1.測試域名為:

lie*****.com

對應的分支為test;

        2.線上域名為:暫時沒配置  對應的分支為master;

        3.npm run build 等待生成dist檔案(dist檔案為打包之後的檔案資源包);

        4.替換一級目錄下的index.html檔案和static檔案夾;

        5.上傳打包後代碼到git上test分支;

        6.進入ci.*****.com網頁釋出 —>前端釋出(測試環境)—>***.h5項目—>立即建構

繼續閱讀