vue3 自动导入composition-apiI和组件

1.api的自动导入

常规写法:

<script setup>import { ref, reactive,  onMounted, computed ,watch } from 'vue';import { useRouter } from "vue-router";const router = useRouter();const person= reactive ({name:'张三',age:20
);
</script>

使用插件后:

<script setup>const router = useRouter();const person= reactive ({name:'张三',age:20
);
</script>

安装插件:

npm i -D unplugin-auto-import

vite.config 配置:

import { defineConfig } from "vite"; 
import AutoImport from 'unplugin-auto-import/vite' //引入api自动导入插件export default defineConfig({
//imports 数组中加入其它的三方件plugins: [AutoImport({ imports: ['vue', 'vue-router','xxx'] }),// 在src目录下生成一个指令文件存放各种全局指令dts: 'src/auto-import.js']
})

auto-import.js

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {const EffectScope: typeof import('vue')['EffectScope']const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']const computed: typeof import('vue')['computed']const createApp: typeof import('vue')['createApp']const createPinia: typeof import('pinia')['createPinia']const customRef: typeof import('vue')['customRef']const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']const defineComponent: typeof import('vue')['defineComponent']const defineStore: typeof import('pinia')['defineStore']const effectScope: typeof import('vue')['effectScope']const getActivePinia: typeof import('pinia')['getActivePinia']const getCurrentInstance: typeof import('vue')['getCurrentInstance']const getCurrentScope: typeof import('vue')['getCurrentScope']const h: typeof import('vue')['h']const inject: typeof import('vue')['inject']const isProxy: typeof import('vue')['isProxy']const isReactive: typeof import('vue')['isReactive']const isReadonly: typeof import('vue')['isReadonly']const isRef: typeof import('vue')['isRef']const mapActions: typeof import('pinia')['mapActions']const mapGetters: typeof import('pinia')['mapGetters']const mapState: typeof import('pinia')['mapState']const mapStores: typeof import('pinia')['mapStores']const mapWritableState: typeof import('pinia')['mapWritableState']const markRaw: typeof import('vue')['markRaw']const nextTick: typeof import('vue')['nextTick']const onActivated: typeof import('vue')['onActivated']const onBeforeMount: typeof import('vue')['onBeforeMount']const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']const onDeactivated: typeof import('vue')['onDeactivated']const onErrorCaptured: typeof import('vue')['onErrorCaptured']const onMounted: typeof import('vue')['onMounted']const onRenderTracked: typeof import('vue')['onRenderTracked']const onRenderTriggered: typeof import('vue')['onRenderTriggered']const onScopeDispose: typeof import('vue')['onScopeDispose']const onServerPrefetch: typeof import('vue')['onServerPrefetch']const onUnmounted: typeof import('vue')['onUnmounted']const onUpdated: typeof import('vue')['onUpdated']const provide: typeof import('vue')['provide']const reactive: typeof import('vue')['reactive']const readonly: typeof import('vue')['readonly']const ref: typeof import('vue')['ref']const resolveComponent: typeof import('vue')['resolveComponent']const setActivePinia: typeof import('pinia')['setActivePinia']const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']const shallowReactive: typeof import('vue')['shallowReactive']const shallowReadonly: typeof import('vue')['shallowReadonly']const shallowRef: typeof import('vue')['shallowRef']const storeToRefs: typeof import('pinia')['storeToRefs']const toRaw: typeof import('vue')['toRaw']const toRef: typeof import('vue')['toRef']const toRefs: typeof import('vue')['toRefs']const toValue: typeof import('vue')['toValue']const triggerRef: typeof import('vue')['triggerRef']const unref: typeof import('vue')['unref']const useAttrs: typeof import('vue')['useAttrs']const useCssModule: typeof import('vue')['useCssModule']const useCssVars: typeof import('vue')['useCssVars']const useLink: typeof import('vue-router')['useLink']const useRoute: typeof import('vue-router')['useRoute']const useRouter: typeof import('vue-router')['useRouter']const useSlots: typeof import('vue')['useSlots']const watch: typeof import('vue')['watch']const watchEffect: typeof import('vue')['watchEffect']const watchPostEffect: typeof import('vue')['watchPostEffect']const watchSyncEffect: typeof import('vue')['watchSyncEffect']
}
// for type re-export
declare global {// @ts-ignoreexport type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
}

2.组件的自动导入

使用前:

<template><HelloWorld />
</template>
<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
</script>

使用插件后:

<template><HelloWorld />  //直接使用组件 不用import引入
</template>
<script setup>
</script>

此插件也可以直接使用其他组件,比如常用的UI框架,如elementPlus

可以支持这些插件:

安装插件:

npm i -D unplugin-vue-components

vite.config配置:

import { defineConfig } from "vite"; import Components from 'unplugin-vue-components/vite' // 按需加载自定义组件
import { ElementPlusResolver} from 'unplugin-vue-components/resolvers'
export default defineConfig {plugins: [vue(),Components({dts: true,//设置自动加载 组件的文件夹dirs: ['src/components'], // 按需加载的文件夹//设置UI框架自动加载 ,注意不要向main.js中导入UI框架了resolvers: [ElementPlusResolver()  // ElementPlus按需加载] })],
}

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

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

相关文章

RT-DETR算法改进:最新Inner-IoU损失函数,辅助边界框回归的IoU损失,提升RT-DETR检测器精度

💡本篇内容:RT-DETR算法改进:最新Inner-IoU损失函数,辅助边界框回归的IoU损失,提升RT-DETR检测器精度 💡本博客 改进源代码改进 适用于 RT-DETR目标检测算法(ultralytics项目版本) 按步骤操作运行改进后的代码即可🚀🚀🚀 💡改进 RT-DETR 目标检测算法专属…

Linux yum 命令

Linux yum 命令 yum&#xff08; Yellow dog Updater, Modified&#xff09;是一个在 Fedora 和 RedHat 以及 SUSE 中的 Shell 前端软件包管理器。 基于 RPM 包管理&#xff0c;能够从指定的服务器自动下载 RPM 包并且安装&#xff0c;可以自动处理依赖性关系&#xff0c;并且…

【Java开发】之获取客户端真实 IP 地址

一、应用场景 在投票系统开发中&#xff0c;为了防止刷票&#xff0c;我们需要限制每个 IP 地址只能投票一次&#xff1b;当网站受到诸如 DDoS&#xff08;Distributed Denial of Service&#xff0c;分布式拒绝服务攻击&#xff09;等攻击时&#xff0c;我们需要快速定位攻击者…

GeoTools实战指南: 处理矢量文件中多多边形的MultiPolygon空洞问题

目录 GeoTools实战指南: 处理矢量文件中多多边形的MultiPolygon空洞问题背景思路分析代码实现引入依赖读取并遍历矢量文件处理并“缝合”一个多边形的内外环结果保存到新的矢量文件中完整代码效果展示仓库代码地址GeoTools实战指南: 处理矢量文件中多多边形的MultiPolygon空洞问…

Ubuntu取消sudo的输入密码

Ubuntu最近要安装软件&#xff0c;每次sudo都要输入一次密码&#xff0c;感觉很麻烦&#xff0c;于是想能不能设置为不输入密码&#xff0c;在网上找了一下解决办法。 主要参考这篇文章&#xff1a; Ubuntu取消sudo时输入密码 上面这篇文章使用的是vim&#xff0c;但是按照博…

会员题-力扣408-有效单词缩写

有效单词缩写 字符串可以用 缩写 进行表示&#xff0c;缩写 的方法是将任意数量的 不相邻 的子字符串替换为相应子串的长度。例如&#xff0c;字符串 “substitution” 可以缩写为&#xff08;不止这几种方法&#xff09;&#xff1a; “s10n” (“s ubstitutio n”) “sub4…

数据处理:数据归一化/标准化常用的算法包括极差法和z-score法

数据归一化和数据标准化都是数据预处理方法&#xff0c;用于使数据在不同尺度下具有可比性和可解释性。两者的主要区别在于归一化将数据缩放到0和1之间&#xff0c;而标准化则将数据缩放到均值为0&#xff0c;标准差为1的范围内。 具体来说&#xff0c;数据归一化是将原始数据…

离散时间系统模型

离散时间系统模型 离散时间系统模型是表示数字滤波器的方案。MATLAB 科学计算环境支持若干种离散时间系统模型&#xff0c;这些模型将在以下章节中介绍&#xff1a; ​传递函数零极点增益状态空间部分分式展开式&#xff08;残差形式&#xff09;二阶节 (SOS)格型结构体卷积矩…

一个车厢号码识别算法(2005年的老程序----ccc)

一个车厢号码识别算法&#xff08;2005年的老程序----ccc&#xff09; 2023-09-18 ccc 程序的识别效果 对图中的车厢号码部分用上下两条线限定分为&#xff0c;然后进行识别。 从上面的识别效果可以看出&#xff0c;识别算法具有一定的鲁棒性&#xff0c;能够适应车厢号码的各…

【论文阅读】NeROIC:在线图像集合中对象的神经渲染

论文连接&#xff1a; NeROIC: Neural Rendering of Objects from Online Image Collections introduction 从在线图像集合中获取对象表示的新颖方法&#xff0c;从具有不同相机、照明和背景的照片中捕获任意对象的高质量几何形状和材料属性。这使得各种以对象为中心的渲染应…

Qt 之元对象

元对象&#xff08;meta object&#xff09;意思是描述另一个对象结构的对象&#xff0c;比如获得一个对象有多少成员函数&#xff0c;有哪些属性。在Qt中&#xff0c;我们将要用到的是QMetaObject这个类。 元对象系统基于以下3点&#xff1a; 以QObject作为基类&#xff1b;…

基于蚁狮算法优化概率神经网络PNN的分类预测 - 附代码

基于蚁狮算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于蚁狮算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于蚁狮优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络的光滑…

【Leetcode Sheet】Weekly Practice 15

Leetcode Test 2586 统计范围内的元音字符串数(11.7) 给你一个下标从 0 开始的字符串数组 words 和两个整数&#xff1a;left 和 right 。 如果字符串以元音字母开头并以元音字母结尾&#xff0c;那么该字符串就是一个 元音字符串 &#xff0c;其中元音字母是 a、e、i、o、u…

Golang 整合RocketMQ

RocketMQ 相关知识汇总 RocketMQ 是什么 RocketMQ 是阿里巴巴开源的一款 MQ 框架&#xff0c;被广泛的使用于不同的业务场景&#xff0c;同时也有非常好的生态系统支持&#xff0c;支持事务消息、顺序消息、批量消息、定时消息、消息回溯等功能。 RocketMQ核心概念 名称服务(N…

【已验证】php配置连接sql server中文乱码(解决方法)更改utf-8格式

解决数据库中的中文数据在页面显示乱码的问题 在连接的$connectionInfo中设置"CharacterSet" > "UTF-8"&#xff0c;指定编码方式即可 $connectionInfo array("UID">$uid, "PWD">$pwd, "Database">$database…

【springboot】Failed to start bean ‘webServerStartStop‘;

新同事新建了一个项目springboot项目&#xff0c;启动时候报错。 具体错误如下&#xff1a; Failed to start bean webServerStartStop; nested exception is org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat server 未能启动bea…

(论文阅读26/100)Weakly-supervised learning with convolutional neural networks

26.文献阅读笔记 简介 题目 Weakly-supervised learning with convolutional neural networks 作者 Maxime Oquab&#xff0c;Leon Bottou&#xff0c;Ivan Laptev&#xff0c;Josef Sivic&#xff0c;CVPR&#xff0c;2015 原文链接 http://www.cv-foundation.org/open…

深度探究深度学习常见数据类型INT8 FP32 FP16的区别即优缺点

定点和浮点都是数值的表示&#xff08;representation&#xff09;&#xff0c;它们区别在于&#xff0c;将整数&#xff08;integer&#xff09;部分和小数&#xff08;fractional&#xff09;部分分开的点&#xff0c;点在哪里。定点保留特定位数整数和小数&#xff0c;而浮点…

C++——const成员

这里先用队列举例&#xff1a; #define _CRT_SECURE_NO_WARNINGS 1 #include <iostream> #include <assert.h> using namespace std; class SeqList { public:void pushBack(int data){if (_size _capacity){int* tmp (int*)realloc(a, sizeof(int) * 4);if (tm…

excel记录wFm数值(推理过程)

1 导入计算wfm库2 实例化具体的指标 3 列表循环之前&#xff0c;设置空list 4 单图评测-将图号、图片名、数值记录 列表里面存储dict 5 将excel列表结果逐个存入excel.xlsx文件 完整代码 test_CPD.py ### test_CPD.py ### import torch import torch.nn.functional as Fimpor…