前言
vue作為國內主流開發框架，對于前端人員而言，還是很容易理解接收的，
開發專案的流程
-
開發前的配置
我在公司里做的是《xxx》的專案，在開發的時，我用的是
vue腳手架3，在搭建完專案后，我會對環境變數進行配置，以便于我們在不同的環境下使用，配置完多環境變數我會對axios請求，進行封裝，在封裝axios請求時，我會在src目錄下新建一個http檔案夾，在檔案夾下在新建三個檔案，分別是api.js，http.js，request.js；api.js用于對介面進行封裝，http.js用于對axios的封裝，resquest.js用于對請求的一些封裝，接著呢？就是對element-ui的引入了，一般element-ui有兩種引入方式：全域引入和按需引入，我這采用的是按需引入的方式，用按需引入方式也是為了提高性能，只匯入我們所需要的組件，
-
組件化的開發
在專案開發時，我采用的是組件化的開發方式，在開發前我們會新建兩個檔案夾，一個用來放置我們的子頁面，一個用于放置我們的公共組件，在開發的程序中呢，用多個頁面用到了搜索功能和表格的渲染，我就封裝了搜索組件和串列渲染組件，由于考慮到性能問題，我在開發時用到了圖片懶加載和路由懶加載，圖片懶加載是為了緩解服務端的壓力，減少不必要的訪問資料庫或延遲訪問資料庫的次數，而路由懶加載是為了防止資料量過大，頁面初次請求時出現白屏的情況，在開發時也遇到了專案難點，就是圖片上傳，最后看了幾篇也是給解決了，
專案開發難點
圖片上傳解決方案
- 使用
element-ui中的upload組件，- 設定請求頭，在圖片上傳時，沒有用到
axios，所以要自己設定請求頭，- 里邊有幾個屬性
action圖片上傳到后臺的api地址；on-success上傳成功時的鉤子函式，在方法中傳引數并列印就能得到上傳圖片的所有資料，
-
專案的打包優化
打包
1.是在hash路由模式下進行的打包
2. 將專案中的檔案路徑/都改為./，
優化
- 引入
cdn加速，將檔案中的組件庫以外部連接的形式匯入到組件中，- 去除.map檔案，
- 去除
console.log()控制臺列印，- 進行代碼壓縮，
- 圖片壓縮
- 抽離公共樣式，
- 設定骨架屏(當使用者網路不穩定時，不至于出現白屏)
總結
初出茅廬，請大佬多多指教，🙂
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/249929.html
標籤：其他