vue3全局挂载方法

 main.js文件

import { createApp } from 'vue'import Cookies from 'js-cookie'import ElementPlus from 'element-plus'
import zhCn from "element-plus/dist/locale/zh-cn"; // 中文语言
import '@/assets/styles/index.scss' // global cssimport App from './App'
import store from './store'
import router from './router'
import directive from './directive' // directive// 注册指令
import plugins from './plugins' // plugins
import { download } from '@/utils/request'// svg图标
import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon'
import elementIcons from '@/components/SvgIcon/svgicon'import './permission' // permission controlimport { useDict } from '@/utils/dict'
import { getConfigKey, updateConfigByKey } from "@/api/system/config";
import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi'// 分页组件
import Pagination from '@/components/Pagination'
// 自定义表格工具组件
import RightToolbar from '@/components/RightToolbar'
// 富文本组件
import Editor from "@/components/Editor"
// 文件上传组件
import FileUpload from "@/components/FileUpload"
// 图片上传组件
import ImageUpload from "@/components/ImageUpload"
// 图片预览组件
import ImagePreview from "@/components/ImagePreview"
// 自定义树选择组件
import TreeSelect from '@/components/TreeSelect'
// 字典标签组件
import DictTag from '@/components/DictTag'const app = createApp(App)// 全局方法挂载
app.config.globalProperties.useDict = useDict
app.config.globalProperties.getConfigKey = getConfigKey
app.config.globalProperties.updateConfigByKey = updateConfigByKey
app.config.globalProperties.download = download
app.config.globalProperties.parseTime = parseTime
app.config.globalProperties.resetForm = resetForm
app.config.globalProperties.handleTree = handleTree
app.config.globalProperties.addDateRange = addDateRange
app.config.globalProperties.selectDictLabel = selectDictLabel
app.config.globalProperties.selectDictLabels = selectDictLabels// 全局组件挂载
app.component('DictTag', DictTag)
app.component('Pagination', Pagination)
app.component('TreeSelect', TreeSelect)
app.component('FileUpload', FileUpload)
app.component('ImageUpload', ImageUpload)
app.component('ImagePreview', ImagePreview)
app.component('RightToolbar', RightToolbar)
app.component('Editor', Editor)app.use(router)
app.use(store)
app.use(plugins)
app.use(elementIcons)
app.component('svg-icon', SvgIcon)directive(app)// 使用element-plus 并且设置全局的大小
app.use(ElementPlus, {locale: zhCn,// 支持 large、default、smallsize: Cookies.get('size') || 'default'
})// 修改 el-dialog 默认点击遮照为不关闭
app._context.components.ElDialog.props.closeOnClickModal.default = falseapp.mount('#app')

模板页面index.vue 在项目根目录下,引用了 main.js文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="renderer" content="webkit"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="icon" href="/favicon.ico"><title>数据管理平台</title><style>html,body,#app {height: 100%;margin: 0px;padding: 0px;}</style>
</head><body><div id="app"></div><script type="module" src="/src/main.js"></script>
</body></html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/820001.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WEB前端-用户注册倒计时

<body><textarea name"" id"" cols"30" rows"10">用户注册协议欢迎注册成为京东用户&#xff01;在您注册过程中&#xff0c;您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议&#xff0c;请您务必仔细阅读…

Kafka分布式集群搭建

1.前置条件 1.1.准备三台centos7虚拟机 1.1.1.jdk环境安装 centos7安装jdk-CSDN博客 1.1.2.已配置ssh免密登录 ssh免密登录_hadoop设置免密码登录-CSDN博客 1.1.3.已配置hostname centos7配置host-CSDN博客 2.修改config/server.properties broker.id0 …

华为OD机试(A卷 + B卷 + C卷)按算法考点分类

本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试&#xff0c;订阅后&#xff0c;专栏内的文章都可看&#xff0c;可加入…

net 5+ 服务创建

worker Service创建 在新版本服务中的创建&#xff0c;名称是Worker Service&#xff0c;从.NET Core 2.1开始&#xff0c;就可以使用辅助角色服务模板了&#xff0c;即Worker Service。它可以编写长期服务&#xff0c;作为 Windows 服务进行托管&#xff0c;还支持跨平台部署…

《幻兽帕鲁》今年夏天将进行游戏重大更新,年内上线竞技场模式 《幻兽帕鲁》是否还能延续热度?Mac电脑玩幻兽帕鲁

千呼唤万等待&#xff0c;《幻兽帕鲁》的0.2.0.6版本终于来了&#xff01;作为2024开年第一爆作&#xff0c;《幻兽帕鲁》在刚上线那段时间可谓是风靡整个互联网&#xff0c;Steam最高在线人数突破200W&#xff0c;但是随着热度过去&#xff0c;目前稳定地在线人数保持在了5W左…

Linux笔记之查看docker容器目录映射

Linux笔记之查看docker容器目录映射 —— 2024-04-15 code review! docker inspect 容器ID或容器名 | grep -A 20 Mounts实践 grep -A 参数详解&#xff1a; grep 的 -A 参数用于在输出中包括匹配行后的指定数目的行。 使用 -A 参数 该参数的基本语法如下&#xff1a; …

路径规划 | RRT结合APF算法快速探索随机树结合人工势场法的路径规划算法(Matlab)

目录 效果一览基本介绍程序设计参考文献 效果一览 基本介绍 RRT结合APF算法的matlab代码。地图为可以替换的栅格地图。代码是在复现华中科技大学发表的英文论文的基础上的进一步改进。RRT算法。人工势场算法。 1.原论文方法简介&#xff1a;针对快速探索随机树&#xff08;RRT&…

【Zabbix】zabbix 软件监控

使用zabbix监控系统查看服务器状态以及网站流量指标&#xff0c;利用监控系统的数据去了解上线发布的结果&#xff0c;和网站的健康状态 利用一个优秀的监控软件&#xff0c;我们可以: ●通过一个友好的界面进行浏览整个网站所有的服务器状态 ●可以在 Web 前端方便的查看监控…

机器学习-随机森林算法预测温度

文章目录 算法简介解决问题获取数据集探索性数据分析查看数据集字段信息查看数据集综合统计结果查看特征值随时间变化趋势 数据预处理处理缺失数据字符列编码数据集分割训练集、验证集、测试集数据集分割 构建模型并训练结果分析与评估进一步优化实际使用经验总结 算法简介 随…

IEDA 的各种常用插件汇总

目录 IEDA 的各种常用插件汇总1、 Alibaba Java Coding Guidelines2、Translation3、Rainbow Brackets4、MyBatisX5、MyBatis Log Free6、Lombok7、Gitee IEDA 的各种常用插件汇总 1、 Alibaba Java Coding Guidelines 作用&#xff1a;阿里巴巴代码规范检查插件&#xff0c;…

BCLinux8U6系统部署oceanbase分布式数据库社区版之二、数据库服务器准备

本文是在完成步骤一、准备 OBD 中控机后的第二步&#xff0c;准备3台oceanbase分布式数据库服务器。 前序步骤&#xff1a;BCLinux8U6系统部署oceanbase分布式数据库社区版之一、准备 OBD 中控机 一、服务器配置 1、服务器硬件配置 本例采用vmware虚拟机来构建测试平台&…

Python高质量函数编写指南

The Ultimate Guide to Writing Functions 1.视频 https://www.youtube.com/watch?vyatgY4NpZXE 2.代码 https://github.com/ArjanCodes/2022-funcguide Python高质量函数编写指南 1. 一次做好一件事 from dataclasses import dataclass from datetime import datetimedatacl…

latex论文写作学习

首先无论是什么文章&#xff0c;最基础的格式都是这个&#xff1a; 如何修改字体呢&#xff1f;&#xff1a; 这样一来就可以在写完之后统一改掉了&#xff0c;用来做标记 最后记得\par 插图&#xff1a; 命令后面的中括号一般就是option

uniapp微信小程序分包

一、创建分包文件夹subPack 二、将页面文件放入分包文件夹中 启动页面和导航tabBar页面不要放入分包文件夹中 三、配置pages.json 四、效果

腾讯EdgeOne产品测评体验—腾讯云Edgeone为我的网站保驾护航

前言 众所周知&#xff0c;网站如果没有安全防护&#xff0c;极易遭受恶意攻击&#xff0c;导致运行受阻甚至瘫痪。为保障网站的安全稳定运行&#xff0c;必须采取诸如CDN加速与DDoS防护等措施&#xff0c;为用户提供安全、可靠的服务。 本文将基于腾讯云边缘安全加速平台&am…

CGKRK-PEG-DSPE 细胞穿透肽CGKRK修饰脂质体纳米粒

CGKRK-PEG-DSPE 细胞穿透肽CGKRK修饰脂质体纳米粒 【中文名称】细胞穿透肽CGKRK-聚乙二醇-磷脂 【英文名称】DSPE-PEG-CGKRK 【结 构】 【品 牌】碳水科技&#xff08;Tanshtech&#xff09; 【纯 度】95%以上 【保 存】-20 【规 格】50mg,100mg,500mg,1g …

RocketMQ 09 SpringBoot 整合

RocketMQ 09 SpringBoot 整合 目前还没有官方的starter pom.xml <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-common</artifactId><version>4.6.1</version></dependency><!-- https://mvn…

小红书2020校招算法笔试题卷一 编程题no.2 笔记精选

题目 薯队长写了n篇笔记&#xff0c;编号从1~n,每篇笔记都获得了不少点赞数。 薯队长想从中选出一些笔记&#xff0c;作一个精选集合。挑选的时候有两个规则&#xff1a; 1.不能出现连续编号的笔记。 2.总点赞总数最多 如果满足1&#xff0c;2条件有多种方案&#xff0c;…

视频怎么用二维码来分享?手机扫码看视频更方便

怎么把制作的视频快速以二维码的形式分享给其他人呢&#xff1f;视频是很多内容重要的一种展示方式&#xff0c;为了能够让其他人更加方便的查看视频内容&#xff0c;现在很多人会选择视频转二维码的方式来提供预览。将视频存储到云端然后通过扫码来调取&#xff0c;不仅减少了…

DHCP小实验

实验要求&#xff1a; 看拓扑有两个网段则我们首先需要对200.1.1.0/26进行子网划分&#xff0c;划分为两个子网&#xff0c;为200.1.1.0/27和200.1.1.32/27 我门就可以一边一个网段了&#xff0c;左边为200.1.1.0/27&#xff0c;右边为200.1.1.32/27 1、配置PC1&#xff0c;2…