vue項目架構

1、工程說明:css

      1.代碼git倉庫地址:git@gitlab.*****.git。html

      2.目錄結構:前端

                     1>.index.html 爲build打包發佈網頁入口;vue

                     2>.lieda文件夾代碼項目工程目錄;git

                     3>.static爲build打包發佈網頁入口訪問資源;vue-router

      注意:不是發佈勿動index.html和static文件,勿在該層級目錄下引入任何資源npm

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

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

2、工程注意事項:數組

       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;

3、工程目錄結構:

      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樣式封裝;

 4、打包發佈流程;

        1.測試域名爲:lie*****.com 對應的分支爲test;

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

        3.npm run build 等待生成dist文件(dist文件爲打包以後的文件資源包);

 

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

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

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

相關文章
相關標籤/搜索