1.首先要根據專案效果圖，觀察是pc端的還是移動端的，需要用什么框架寫，所需要引入什么組件
【這里選擇（vue：因為他使用起來簡單，靈活，高效率）（vant：他是一個輕量、可靠的移動端 Vue 組件庫，使用起來很容易上手）】
2.移動端我還會配置一下rem，安裝好對應插件，可以讓px自動轉換成rem自適應布局，或者使用vw、vh以及百分比來實作自適應布局，之后還可以封裝一些scss公共的樣式，
【（可以使用混入的方式，先創建好一個mixins.scss檔案里面設定一些常用的公共樣式，那個組件使用時通過@import直接匯入混入的組件，樣式使用時通過@include 名稱 來使用）】
3，封裝網路模塊介面，安裝axios
【（封裝網路模塊思路：）（之后安裝axios，對axios進行封裝，添加請求攔截，和回應攔截，我一般在請求攔截器中,給請求頭添加token欄位，當然這個token要存盤在vuex中，因為很多頁面功能都要用到token，所以用vuex對資料進行了共享，還有loding影片的開啟，回應攔截器中，我一般會關閉請求時開啟的影片，根據后端回傳的狀態碼（code值），驗證token是否有效或過期（一般401表示token無效，402表示token過期），）（，一開始不會全部封裝，會先封裝幾個，其它的等寫到的時候在封裝）】
4.還需要配置一下多環境變數，
【（分別是開發環境，測驗環境，上線環境，并創建相應的檔案以及不同環境配置：.env.development 本地開發環境配置；.env.staging 測驗環境配置；.env.production 正式環境配置，為了修改起來方便，我們需要去config 下新建三個于環境配置相對應的.js檔案，在里面創建本地api請求地址，專案地址等，再去config中根據環境引入不同配置 process.env.NODE_ENV，最后在網路模塊核心檔案中的baseurl根據環境不同引入不同baseApi地址）詳情請看{ 多環境配置的詳細思路： }】
5.一系列配置做好之后配置路由，拆分組件以及vuex的使用，我通常會把常用的組件單獨封裝起來，底部的tabber、上拉加載、下拉重繪、點擊回頂部等，使用時直接呼叫，比較方便，
【（重繪頁面vuex資料丟失的問題，可以用資料持久化解決，原理就是把vuex中的資料，同步到sessionStorage中，用一個插件就可以解決vuex-persistedstate，）】
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/245179.html
標籤：其他