離職後才搞懂vue專案開發流程中的疑惑點

2021-09-11 13:52:10 字數 3313 閱讀 6429

在離職的最後乙個月,幫兩位同事申**薪,確切的說,申**薪是導火索,我被扣上了哄抬同事工資以提高自己工資的帽子,在推動前後端分離工作中處處碰壁,點燃了壓抑許久的離職衝動,領導培養自己四五年,不讓聲張,答應悄悄離開。

離開時原來公司專案裡剩下很多問題沒有解決,現在自己還在做vue和動畫的專案,現在或許之前的問題已經解決了,但我還是把思路寫下來,也算對的起自己悄悄離職的事情了,看到你們獲得優秀團隊獎的**了,很棒,祝福你們????。

這邊用的是gitlab做git伺服器,可以配置commit的鉤子函式,實現自動部署和線上發布,就相當伺服器監聽你的提交,在你commit之後,伺服器自動執行了一下npm run build,放到對應的測試伺服器目錄,配置檔案在根目錄下有.gitlab-ci.yml檔案,起作用的是下邊一段**,script是linux指令碼,拷貝檔案到指定的靜態資源cdn目錄和web伺服器目錄,這塊知識點是gitlab-ci 持續整合,可以關注一下,svn應該也有類似的配置,讓運維幫忙給配一下吧。

npm-build-test:

image: cdn路徑

stage: build

cache:

untracked: true

paths:

- node_modules/

before_script:

- export bi_env="test"

script:

- "npm install --registry=http://**位址 --sass_binary_site="

- "npm run build"

- "rsync -auvz dist/index.html ip::伺服器開發分支目錄/trunk/resources/views/index/"

- "rsync -auvz dist/* 靜態資源cdn目錄/trunk/bi/"

only:

- master 分支名稱

複製**

以前咱們經常出現這種情況, v0.1的需求已經上線,v0.2的需求已經提測了,v0.3的需求在開發中,現在要修復一下v1.0的線上bug,用svn的話可能就是把修復後的檔案更新到三個分支上繼續開發,更新來更新去就lock了。

如果用git做版本管理,就方便很多,按照分支規範,常用4個分支,develop持續開發分支,release版本分支,hotfix緊緊熱修復分支,master上線版本主分支, 可以看看gitflow工作流方面的資料,真的比svn的分支好用太多了。

我們目前在用webpack 4.0 和 vue-cli3.0,編譯很快,建議公升級,記得之前專案用vue-cli2.0編譯和打包時間很長。

原來專案裡用的是jquery.ajax方法,其實也可以其實也可以全域性設定攔截,我們用的是axios,在main.js中引用,設定根路徑、狀態碼、token、超時時間等全域性設定,**如下:

// 引入axios

import axios from 'axios'

// axios配置

// 配置預設axios引數

axios.defaults.baseurl = '/'

axios.defaults.timeout = 1000000

// 新增請求***

axios.interceptors.request.use(function (config) else

}else)

}} return config

}, function (error) )

// 返回結果攔截

axios.interceptors.response.use(function (response) else

if (response.data.code === 1000)

} else

}, function (error)

// 請求錯誤時做些事

return promise.reject(error)

})複製**

原來的專案是保險專案,大家沒有前後端分離的業務系統經驗,都是最基礎的介面,乙個乙個介面都是從資料字典中取出,業務邏輯往前端移,導致前端有很多的序列、並行的非同步操作,請求各種介面,然後遍歷合併各種資料,序列並行我們用promise寫,非同步操作的問題就解決了,資料的操作我們用lodash.js,效率比手寫快,這兩塊可以加深一下。

initializationtab(obj))

.catch(function(error) );

})}複製**

原來專案登入是跳轉到jsp登入頁面,然後再跳回靜態頁面,sessionid就存到cookie裡了,建立會話,也可以form提交做登入,正常走介面,也會在cookie裡存上sessionid建立會話。

當然前後端分離最好用jwt方案,把生成的token放在redis裡,建立事務,token過期後自動刪除,如有提前退出,則給改token打上標識,不通過該token通過即可續簽也好解決,在如果token在到期5分鐘前訪問,則生成新token返回給前端,給即將過期的token打上標識,到期後自動刪除。

我們h5動畫做了很多嘗試,民生銀行的藍精靈主題、租房分期、招聘3d、消消樂等,在適配、時間軸、精靈圖、動畫效能等方面有了一定積累,筆記夭折在我的mweb編輯器裡,如果後邊有時間再更新出來吧。

最新的專案是自己搭建的vue架子,功能和場景也慢慢複雜起來,還是要多看api和文件,多了解原理,才能游刃有餘的使用這些工具,高效的完成開發任務,比如vue的元件遞迴、快取、強制重新整理、混入、過濾器,axios的預設配置、canceltoken等等,最近的專案筆記總結還沒有寫完,先把目錄貼出來,期望進步吧。

如果你們還在從事前端,相忘於江湖吧??。

VUE專案開發流程

安裝npm 安裝webpack vue cli 2.9.6版本 版本不同可能會導致以下一些目錄結構以及錯誤解決辦法不符合實際情況 初始化建立專案,專案名稱 專案描述 擁有者等等資訊,d code self vue init webpack common component project name ...

vue專案開發流程附加模板

工程目錄說明 本地開發 構建生產 開發注意 element ui iview nrm 乙個npm倉庫管理工具 npm常用命令 開啟cmd視窗,powershell win10 視窗的快捷方式 用vue 結合element ui iview設計的用於智慧型林業產品的前端開發庫,借鑑github部分 也...

深圳Web培訓 Vue專案開發流程

深圳web培訓 vue專案開發流程 一 企業專案開發流程 產品提需求 互動設計出原型設計 視覺設計出ui設計圖 前端開發出頁面模板 server端訪問資料庫 驗收測試 二 為什麼要使用vue 5個前端,4個會vue,1個會react,那麼你該如何選擇 客戶要求使用vue 三 如何選擇腳手架 自己搭建...