首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >umi4+vue3开发模板摸索

umi4+vue3开发模板摸索

作者头像
代码哈士奇
发布2022-06-27 14:46:01
发布2022-06-27 14:46:01
2.2K00
代码可运行
举报
文章被收录于专栏:dmhsq_csdn_blogdmhsq_csdn_blog
运行总次数:0
代码可运行

why do this

地址 https://gitee.com/dmhsq/umi4-vue-template 虽然进公司上班后 用的是react但是我依然有一颗vue的心,哈哈哈 看umi文档的时候发现有了一条 使用vue,让我这个又喜欢umi又喜欢vue的人感觉非常开心

然后我就去试了,中间出了一些问题,又跑去官方交流反馈群问了下,终于跑起来了 然后搞出了以下模板,还不够完善,有更新维护我会放到gitee

模板介绍

封装好网络请求以及存储 在utils里面

可以正常部署到服务器 测试部署 地址 http://mocks.dadandmother.cn/

这里页面还是umi脚手架创建项目的页面 没有改动

参考了 umi4的示例 以及umi4Max 这里是基础模板 后面会加入element的样式布局和菜单等等 做一个后台模板

关于vue的一些配置 在 app.tsx

目前只用了 element 和 pinia 如果需要在 app.tsx 配置 这里可看umi4文档https://umijs.org/docs/guides/use-vue

代码语言:javascript
代码运行次数:0
运行
复制
// 在此处写相当于常规vue项目的一些配置
export async function onAppCreated({ app }: any) {
  // console.log('onAppCreated', app);
  const pinia = createPinia();
  app.use(ElementPlus);
  app.use(pinia);
}

路由

写在 .umirc.ts 中 参考文档https://umijs.org/docs/guides/use-vue

路由拦截

代码语言:javascript
代码运行次数:0
运行
复制
// 此处可处理路由
export async function onMounted({ app, router }: any) {
  // console.log('onMounted', app, router);
  // 此处写路由拦截
  router.beforeEach((to: any, from: any, next: Function) => {
    // console.log('router beforeEach', to, from);
    // console.log(router);
    document.title = to.meta.title ?? '系统';
    next();
    // document.title = to
  });
  // or
  // router.beforeEach((to: any, from: any) => {
  //   console.log('router beforeEach', to, from);
  // });
}

项目配置参考umi4

这个太多 看文档配置

在 .umirc.ts中 文档 https://umijs.org/docs/tutorials/getting-started

整体布局

在 layouts/index.vue 中

网络请求

在utils中的request.ts文件 导出使用即可

关于mock

这里 可以使用 umi提供的 mock 即写在mock文件夹 也可以使用 第三方平台远程mock

这里我用的是代理 以及自己的 mock平台(暂时不开源)

灵活性

你可以全局关闭或者开启 ,也可以在网络请求时候加入参数 如下

这个true 即为 单项开启 为false为单项关闭 优先级大于全局

类型定义

写在

配置端口号

注意

如果有时候报错关于umi 的 建议删除 .umi 这个文件夹 (缓存)

其它

umi4支持vite 但是还是先观望 等稳定了再切换

模板

此模板持续更新维护,因为自己要用… 哈哈哈

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-06-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • why do this
  • 模板介绍
    • 关于vue的一些配置 在 app.tsx
    • 路由
      • 路由拦截
    • 项目配置参考umi4
    • 整体布局
    • 网络请求
    • 关于mock
      • 灵活性
    • 类型定义
    • 配置端口号
    • 注意
    • 其它
    • 模板
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档