1.首先要根據項目效果圖，觀察是pc端的還是移動端的，需要用什麼框架寫，所需要引入什麼組件
這裏選擇：
vue：因爲他使用起來簡單，靈活，高效率；
vant：他是一個輕量、可靠的移動端 Vue 組件庫，使用起來很容易上手
2.移動端我還會配置一下rem，安裝好對應插件，可以讓px自動轉換成rem自適應佈局，或者使用vw、vh以及百分比來實現自適應佈局，之後還可以封裝一些scss公共的樣式。
移動端rem配置：
scss混入的使用：
可以使用混入的方式，先創建好一個mixins.scss文件裏面設置一些常用的公共樣式，
哪個組件使用時通過@import直接導入剛剛的組件，樣式中使用時通過@include來使用
3，封裝網絡模塊接口，安裝axios
封裝網絡模塊思路：
之後安裝axios，對axios進行封裝，添加請求攔截，和響應攔截：
我一般在請求攔截器中,給請求頭添加token字段，還有loding動畫的開啓。
當然這個token要存儲在vuex中，因爲很多頁 面功能都要用到token，所以用vuex對數據進行了共享，
在響應攔截器中，我一般會關閉請求時開啓的動畫
根據後端返回的狀態碼（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中，
//下載
npm install vuex-persistedstate --save
//使用：
在vuex中引入
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
state,
mutations,
actions,
getters,
plugins: [createPersistedState({
storage: sessionStorage,
key: "token"
})]//會自動保存創建的狀態。刷新還在
})
6. 配置好之後可以寫自己的項目
7. 優化項目