当前位置:   article > 正文

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

vue移动端框架

概述

一个纯净的移动端框架 ,用到了 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逻辑)

  1. static login(params?: any) {
  2. return this.post({
  3. url: `/login`,
  4. params: params,
  5. statusCode: 200,
  6. getJsonPath() {
  7. const loginSuccess = import('./mock/login/login.json')
  8. const loginFail = import('./mock/login/loginFail.json')
  9. // 可以自己写逻辑判断返回不同的mock
  10. return loginSuccess
  11. }
  12. })
  13. }
  14. // 实现的核心代码(方便定义api的时候顺便定义mock数据)
  15. ![](/contentImages/image/20220805/GZzd31UCRK8Euvz0WLe.png)
  16. // 利用动态导入,避免非mock状态下,加载太多mock数据

使用函数式对话框

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

效果截图
 

  1. // 实现思路
  2. import { createVNode, render } from "vue"
  3. import modal from './modal.vue'
  4. // 创建一个容器,用来放dialog
  5. const div = document.createElement('div')
  6. div.setAttribute('class', 'global_modal_container')
  7. document.body.appendChild(div)
  8. // 定义好输入
  9. export type ModalConfig = {
  10. title?: string,
  11. content: string,
  12. showCancel?: boolean,
  13. cancelText?: string,
  14. confirmText?: string,
  15. confirm?: Function,
  16. cancel?: Function,
  17. div?: HTMLDivElement,
  18. }
  19. export default (modalConfig: ModalConfig) => {
  20. return new Promise((resolve, reject) => {
  21. const confirm = () => {
  22. // 根据点击时间,把内容设置为null,达到取消弹窗的效果。
  23. render(null, div)
  24. resolve(true)
  25. }
  26. const cancel = () => {
  27. render(null, div)
  28. }
  29. // 判断如果没有回调,那么会返回Promise对象
  30. if (!modalConfig.confirm) {
  31. modalConfig.confirm = confirm
  32. }
  33. if (!modalConfig.cancel) {
  34. modalConfig.cancel = cancel
  35. }
  36. modalConfig.div = div
  37. const vnode = createVNode(modal, modalConfig)
  38. render(vnode, div)
  39. })
  40. }

dialog

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/人工智能uu/article/detail/751520
推荐阅读
相关标签
  

闽ICP备14008679号