vue3移动端脚手架(纯净,集成丰富)

概述

一个纯净的移动端框架 ,用到了 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')
            // 可以自己写逻辑判断返回不同的mock
            return loginSuccess
          }
        })
      }
    // 实现的核心代码(方便定义api的时候顺便定义mock数据)
    ![](/contentImages/image/20220805/GZzd31UCRK8Euvz0WLe.png)
    // 利用动态导入,避免非mock状态下,加载太多mock数据

使用函数式对话框

复制代码
    // api 参考微信小程序 https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html
    showModal({
        content: '测试内容',
        // showCancel: false
      })

效果截图

复制代码
    // 实现思路
    import { createVNode, render } from "vue"
    import modal from './modal.vue'
    // 创建一个容器,用来放dialog
    const 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 = div
        const vnode = createVNode(modal, modalConfig)
        render(vnode, div)
      })
    }
相关推荐
九皇叔叔2 天前
Windows用Notepad++编辑Shell脚本:一招解决Linux执行报错问题
linux·windows·notepad++
郑叔敲代码3 天前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
white-persist7 天前
Burp Suite模拟器抓包全攻略
前端·网络·安全·web安全·notepad++·原型模式
xiecoding.cn8 天前
Notepad++下载安装图文教程(附安装包)
notepad++·notepad++下载安装·notepad++下载·notepad++安装教程·notepad++安装包·notepad++下载教程
黑客思维者11 天前
Notepad++中高危DLL劫持漏洞深度剖析
notepad++·漏洞·dll劫持
Nan_Shu_61411 天前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
知识分享小能手14 天前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
cpych16 天前
删除Notepad++关于弹窗的反动字样
notepad++
知攻善防实验室16 天前
Notepad++ 本地提权漏洞|复现|分析
测试工具·安全·网络安全·notepad++
杏花春雨江南17 天前
微信小程序里 uni.navigateTo 用的多了, 容易报错,
微信小程序·小程序·notepad++