vue3移动端脚手架（纯净，集成丰富）

立即下载用AI写一个

发布时间：2022-08-09

8人 | 浏览：3013次 | 收藏 |

技术：Vue3 + vuex + Vite3 + Vant3 + sass + eslint + stylelint + htmlhint + husky + commitlint axios + axios-adapter + VConsole + 自定义全局 loading ，自定义函数式 dialog （api模仿微信小程序）

运行环境：nginx/apache/IHS/IIS

概述

一个纯净的移动端框架，用到了 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模仿微信小程序）

是一个纯净的前端框架，集成丰富，适合做二次开发。

# 代码目录结构
![代码目录结构](/contentImages/image/20220802/R73G5WEpVHrKVJi92wd.png)

# 示例代码
定义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
  })
```
效果截图
![dialog](/contentImages/image/20220802/RyQYg9dTPeLFEHBTrtu.png)
```
// 实现思路
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)
  })
}

```

全局loading
```
import { loading } from '@/utils/tools'
loading.show()
// loading.hide()

// 核心实现
import { createVNode, render } from "vue"
import loading from './loading.vue'

const div = document.createElement('div')
div.setAttribute('class', 'global_loading_container')
document.body.appendChild(div)

export default function showLoading(show: boolean) {
  const vnode = createVNode(loading)
  if (show) {
    render(vnode, div)
  } else {
    render(null, div)
  }
}

```

# 其他功能介绍
- 检测大文件提交（防止不小心提交压缩包之类的大文件进仓库）
- 自定义VConsole插件示例

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

vue3移动端脚手架（纯净，集成丰富）

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子