概述
一個純凈的移動端框架 ，用到了 Vue3 + vuex + Vite3 + Vant3 + sass + eslint + stylelint + htmlhint + husky + commitlint axios + axios-adapter + VConsole + 自定義全局 loading ，自定義函數式 dialog （api模仿微信小程序），非常適合做腳手架。
詳細
框架demo介紹
Vue3 + vuex + Vite3 + Vant3
sass
eslint + stylelint + htmlhint
husky + commitlint
axios + axios-adapter
VConsole(with custom plugin)
Custom components: loading
Custom components: dialog （api模仿微信小程序）
是一個純凈的前端框架，集成豐富，適合做二次開發。
代碼目錄結構
示例代碼
定義api（同時可以定義mock數據，可自己寫mock邏輯）
static login(params?: any) {return this.post({url: `/login`,params: params,statusCode: 200,getJsonPath() {const loginSuccess = import('./mock/login/login.json')const loginFail = import('./mock/login/loginFail.json')// 可以自己寫邏輯判斷返回不同的mockreturn loginSuccess}})}// 實現的核心代碼（方便定義api的時候順便定義mock數據）// 利用動態導入，避免非mock狀態下，加載太多mock數據使用函數式對話框
// api 參考微信小程序 https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.htmlshowModal({content: '測試內容',// showCancel: false})效果截圖
?
// 實現思路import { createVNode, render } from "vue"import modal from './modal.vue'// 創建一個容器，用來放dialogconst div = document.createElement('div')div.setAttribute('class', 'global_modal_container')document.body.appendChild(div)// 定義好輸入export type ModalConfig = {title?: string,content: string,showCancel?: boolean,cancelText?: string,confirmText?: string,confirm?: Function,cancel?: Function,div?: HTMLDivElement,}export default (modalConfig: ModalConfig) => {return new Promise((resolve, reject) => {const confirm = () => {// 根據點擊時間，把內容設置為null，達到取消彈窗的效果。render(null, div)resolve(true)}const cancel = () => {render(null, div)}// 判斷如果沒有回調，那么會返回Promise對象if (!modalConfig.confirm) {modalConfig.confirm = confirm}if (!modalConfig.cancel) {modalConfig.cancel = cancel}modalConfig.div = divconst vnode = createVNode(modal, modalConfig)render(vnode, div)})}
