前言
做一個新的項目就需要常用的代碼,比如
- 登錄,註冊 (模板)
- 全局路由守衛(路由配置)
- Request封裝(請求封裝)
- api集中管理
- 引入依賴的UI庫(color-ui,uview-ui)
- flex常用佈局css,
- 配置分包
- utils常用工具函數
- 配置Vuex(store)
- 等等
爲了提高自己的效率(說白了有點懶)決定把這些作爲基礎模板,下次做新項目直接用就行了
效果圖
全局路由守衛
(1) 路由攔截
uni-simple-router 路由、攔截、最優雅的解決方案
(2) 路由配置
通過 vue.config.js 配合uni-read-pages,可以隨心所欲的讀取 pages.json 下的所有配置
Request封裝
適用於一項目多域名請求、七牛雲圖片上傳、本地服務器圖片上傳、支持 Promise.
api集中管理
api集中管理; 爲簡化邏輯代碼量整潔的原則,像調用函數一樣調用api,做到代碼分離,在apis目錄統一創建api函數,並且封裝接口返回數據類型校驗的方法,掛載到vue原型中,頁面通過this.$apis.apiName()
調用
分包
sub目錄分包管理 由於微信小程序的限制,上傳發布機制總包大小不能大於2m,所以項目若超出該限制,要在page.json中做分包處理,分包處理的配置與pages目錄保持一致
配置vuex
不需要引入每個子store模塊
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const files = require.context("./modules", false, /\.js$/);
let modules = {
state: {},
mutations: {},
actions: {}
};
files.keys().forEach((key) => {
Object.assign(modules.state, files(key)["state"]);
Object.assign(modules.mutations, files(key)["mutations"]);
Object.assign(modules.actions, files(key)["actions"]);
});
const store = new Vuex.Store(modules);
export default store;
頁面使用Vuex
import { mapState,mapActions } from 'vuex';
computed: {
...mapState(['userInfo'])
}
methods: {
...mapActions(['getUserInfo'])
}
源碼下載
後面持續更新。。。。
如果你導入源碼或者學習過程中有任何問題,都可以加我qq:392716797。大家一起學習,一起進步。
前端學習大佬羣493671066,美女多多。老司機快上車,來不及解釋了。