vue3 admin 后台管理项目小计

Naive UI全局挂载useDialog、useMessage

App.vue

  <n-config-provider :locale="locale" :date-locale="dateLocale" :theme-overrides="themeOverrides"><n-dialog-provider><n-message-provider><router-view v-slot="{ Component }"><transition name="el-fade-in-linear" appear mode="out-in"><component :is="Component" /></transition></router-view></n-message-provider></n-dialog-provider></n-config-provider>

AppMain.vue

import { useDialog, useMessage } from 'naive-ui'
window.$useDialog = useDialog()
window.$message = useMessage()

global.d.ts

import type { DialogApiInjection } from 'naive-ui/lib/dialog/src/DialogProvider'
import type { MessageApiInjection } from 'naive-ui/lib/message/src/MessageProvider'
declare global {interface Window {$message: MessageApiInjection$useDialog: DialogApiInjection}
}

Naive UI Dialog 自定义 content render NInput输入框 + 校验

render 中 NInput 的value 必须定义onUpdateValue 才能更新视图

效果

import { NFormItem, type FormItemRule} from 'naive-ui'
...const controlRemark = ref('')const controlRemarkRef = ref<FormItemInst | null>(null)const rule: FormItemRule = {trigger: ['input', 'blur'],validator() {if (!controlRemark.value.trim()) {return new Error('你的校验提示语!')}}}window.$useDialog.warning({title: '提示',style: {width: '500px'},content: () =>h('div',{class: 'text-base'},[h('div', ['您确认一些操作【', h('i', orderNo), '】记录?']),h('div',{ class: 'text-gray text-sm pt-1 pb-1' },'descdescdescdesc'),h(NFormItem,{ref: controlRemarkRef,label: 'label',labelPlacement: 'left',rule},() =>h(NInput, {clearable: true,autofocus: true,placeholder: 'placeholder',type: 'textarea',value: controlRemark.value,maxlength: 255,showCount: true,onUpdateValue: (val: any) => {controlRemark.value = val},class: 'text-left'}))]),positiveText: '确定',negativeText: '取消',iconPlacement: 'top',maskClosable: false,onPositiveClick: async () => {return new Promise((resolve, reject) => {controlRemarkRef.value?.validate('blur', (errors) => {if (errors) {reject()} else {...your logic here}})})},onNegativeClick: async () => {return true}})

集成 IconPark 字节跳动开源图标库

为啥IconPark 而不是iconfont? iconfont前段时间挂了 & IconPark 图标还挺好看 & 尝点新鲜的
1.注册-创建项目-添加图标-生成在线链接
2.index.html header 新增一个script 引入链接

常见问题 Failed to resolve component: iconpark-icon
解决方案 vite.config.ts

...
plugins:[vue({template: {compilerOptions: {isCustomElement: (tag) => tag === 'iconpark-icon'}}}),vueJsx({isCustomElement: (tag) => tag === 'iconpark-icon'}),...
]

vite全局变量挂载、输出打包时间及环境|esbuild 移除console

vite.config.ts

const __APP_INFO__ = {pkg: { dependencies, devDependencies, name, version },lastBuildTime: moment().format('YYYY年MM月DD日 HH:mm:ss')
}
...
define: {// fix process is not defined https://github.com/vitejs/vite/issues/1973#issuecomment-787571499'process.platform': null,__APP_INFO__: JSON.stringify(__APP_INFO__)},...
esbuild: {drop: mode === 'production' ? ['console', 'debugger'] : undefined},

main.ts

const { lastBuildTime, pkg } = __APP_INFO__
const viteMode = import.meta.env.MODE || 'production'
const title = pkg.name + ' ' + pkg.version
const content = viteMode + ' ' + lastBuildTime
console.log(`%c ${title} %c  ${content} `,`padding: 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060 ;`,`padding: 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e ;`
)

router-view/keep-alive 视图白屏问题

appMain.vue

    <router-view v-slot="{ Component, route }"><transition name="fade-transform" mode="out-in"><keep-alive :include="['a','b']"><component :is="Component" :key="route.path" /></keep-alive></transition></router-view>

初次进入路由时页面展示正常，再次进入时页面空白,devtools中keepAlive组件下为空
页面组件如下
表格组件封装Grid

<template><Gridref="gridRef":columns="tableColumn":toolbar-button="toolbarButtonConfig":operte-button="operateButtonConfig":query-api="order":extra-query-params="extraQueryParams"@clickFallBack="clickFallBack"/>
</template>

即使vue3支持template下有多个根节点 keepalive包裹的组件需要只有一个根元素不能是fragment
keepalive包裹的组件需设置name (unplugin-vue-define-options/vite 插件)
(不建议)给router-view 设置key = route.fullPath 解决白屏但keep-alive会失效

修改如下

defineOptions({name: 'Pool'
})
....
<template><div><Gridref="gridRef":columns="tableColumn":toolbar-button="toolbarButtonConfig":operte-button="operateButtonConfig":query-api="order":extra-query-params="extraQueryParams"@clickFallBack="clickFallBack"/></div>
</template>

异步路由动态导入

路由资源由接口返回，需将资源中Component组件字符串转换为路由组件地址，实现动态导入

vue2中的动态导入实现

// _import_production.js
module.exports = file => () => {file = file.indexOf('/views/') === 0 ? file.slice(7) : filelet objtry {obj = import('@/views/' + file)} catch (e) {obj = import('@/views/errorPage/404')}return obj
}
....
// 遍历后台传来的路由字符串，转换为组件对象
route.component = _import(route.component); // 导入组件

vue3+viteGlob 导入

const Layout = () => import('@/layout/index.vue')
const modules = import.meta.glob(`@/views/**/**.vue`)
export const NotFoundRoutes: Array<RouterRowTy> = [{ path: '/:pathMatch(.*)', redirect: '/404', hidden: true }]
......
export const filterAsyncRouteForSSO = (resourceList: RouterRowTy[]) => {return resourceList.map((route: any) => {if (route.component === 'layout') {route.component = Layout} else {route.component = modules[route.component]}if (route.children && route.children.length) {route.children = filterAsyncRouteForSSO(route.children)}return route})
}
...
// 生成路由模块动态导入
let filterAsyncRoutes = filterAsyncRouteForSSO(resourceList)
// NotFoundRoutes 异常匹配路由  须放在路由匹配规则的最后
filterAsyncRoutes = [filterAsyncRoutes, NotFoundRoutes].flat()

vxe-table 列表自定义列配置、缓存列配置

vxe-table v4 列表自定义列配置（Promise缓存,拖动排序、置顶）

vue3 admin 后台管理项目小计相关推荐

尚硅谷尚品汇_后台管理项目
vueProject_尚品汇后台管理项目源码文章目录 vueProject_尚品汇后台管理 login/out模块 product模块 login/out模块 .env.development . ...
为element ui+Vue搭建的后台管理项目添加图标
问题:使用element UI 及Vue 2.0搭建一个后台管理项目,想要在页面中为其添加对勾及叉的图标. 解决方案:问题涉及到为页面添加图标.有两种解决方案. (1)Element官网提供了Icon ...
电商项目总结java_Vue 电商后台管理项目阶段性总结(推荐)
一.阶段总结该项目偏向前端更多一点,后端 API 服务是已经搭建好了的,我们只需要用既可以,(但是作为一个全栈开发人员,它的数据库的表设计,Restful API 的设计是我们要着重学习的!!!) ...
全程配图超清晰的Springboot权限控制后台管理项目实战第二期（Springboot+shiro+mybatis+redis）
全程配图超清晰的Springboot权限控制后台管理项目实战第二期(Springboot+shiro+mybatis+redis) 众所周知,作为一个后端新手学习者,通过项目来学习,增长项目经验,是一 ...
python的django后台管理_python测试开发django-17.admin后台管理
前言通常一个网站开发,需要有个后台管理功能,比如用后台管理发布文章,添加用户之类的操作.django的admin后台管理主要可以实现以下功能基于admin模块,可以实现类似数据库客户端的功能,对数 ...
django21：admin后台管理\media配置\图片防盗链\暴露后端资源\路由分发\时间分类
admin后台管理创建超级用户 createsuperuser 1.到应用下的admin.py注册模型表 from django.contrib import admin from blog imp ...
SSM 电影后台管理项目
SSM 电影后台管理项目概述通过对数据库中一张表的CRUD,将相应的操作结果渲染到页面上. 笔者通过这篇博客还原了项目(当然有一些隐藏的坑),然后将该项目上传到了Github.Gitee,在末尾会 ...
Django admin后台管理页面的常用设置
Django admin后台管理页面的常用设置选择列表选项choices # filename: models.pyfrom django.db import models# 例1 int类型:ST ...
第二十课 Django Admin后台管理
第二十课 Admin后台管理 1. admin创建用户创建管理员账号: python manage.py createsuperuser# 按提示输入用户名.邮箱.密码 2. 注册模型如果只是在a ...

vue3 admin 后台管理项目小计

Naive UI全局挂载useDialog、useMessage

Naive UI Dialog 自定义 content render NInput输入框 + 校验

集成 IconPark 字节跳动开源图标库

vite全局变量挂载、输出打包时间及环境|esbuild 移除console

router-view/keep-alive 视图白屏问题

异步路由动态导入

vxe-table 列表自定义列配置、缓存列配置

vue3 admin 后台管理项目小计相关推荐

最新文章

热门文章

vue3 admin 后台管理项目小计

Naive UI全局挂载useDialog、useMessage

Naive UI Dialog 自定义 content render NInput输入框 + 校验

集成 IconPark 字节跳动开源图标库

vite全局变量挂载、输出打包时间及环境|esbuild 移除console

router-view/keep-alive 视图白屏问题

异步路由 动态导入

vxe-table 列表自定义列配置、缓存列配置

vue3 admin 后台管理项目小计相关推荐

最新文章

热门文章

异步路由动态导入