程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2022-04(9)

2022-05(14)

2022-06(1)

2022-08(52)

2022-09(5)

vue3的unplugin-auto-import自动引入

发布于2023-01-18 22:49     阅读(315)     评论(0)     点赞(10)     收藏(0)


vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦,可以通过unplugin-auto-import给我们自动引入

1、安装

npm i -D unplugin-auto-import

2、在vite.config.ts中引入

import AutoImport from 'unplugin-auto-import/vite'

并在plugins中配置:

export default defineConfig({

        plugins: [

            ......

            AutoImport({  

              imports: ['vue'],

              dts: 'src/auto-import.d.ts',

            })

        ]

})

AutoImport中可以有很多配置项,可以到github中看详细配置:

GitHub - antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup

注:dts是帮我们生成的类型声明文件,直接使用会找不到

上面配置完毕后会在src目录下生成一个auto-import.d.ts文件,里面帮我们自动引入vue相关内容,我们可以在项目中直接使用。

注意:上面配置完毕dts后可能并不会自动生成auto-import.d.ts文件,可以重新运行一下项目,或者关闭编辑器重新打开运行即可。

使用如下:

  1. <script setup lang="ts">
  2. // 这里我们不用引入ref直接使用
  3.   const msg = ref<string>('Hello Vue3')
  4. </script>
  5. <template>
  6.   {{ msg }}
  7. </template>
  8. <style scoped lang="scss"></style>

原文链接:https://blog.csdn.net/weixin_52020362/article/details/127841641




所属网站分类: 技术文章 > 博客

作者:天使的翅膀

链接:http://www.qianduanheidong.com/blog/article/494759/22c4f9429151932d90c8/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

10 0
收藏该文
已收藏

评论内容:(最多支持255个字符)




博客(new)

vue3 setup 父传子,子传父 我们需要绑定一个值,这个值是子组件那边的(generateData),而sonComponentValue这个变量就是父组件要给子组件传的值,父组件这边要写就那么多。子组件这边就要用到我们的setup去接收父组件传过来的值。vue3 setup父子传值。举例:父组件: 子组件。

微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配 微信小程序自定义导航栏机型适配--底部Tabbar--view高度

真正有效解决vue addRoute动态添加路由后刷新页面白屏的靠谱方法及思路,切实可行! Vue3动态路由刷新后失效真正可行的解决方案!

vite中静态资源(css、img、svg等)的加载机制及其相关配置 vite对静态资源文件的处理

HttpServletRequest 获取参数 1 HttpServletRequest获取参数方法  可以使用HttpServletRequest获取客户端的请求参数,相关方法如下:  String getParameter(String name):通过指定名称获取参数值;String[] getParameterValues(String na...

前端中的BFC是什么? BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。MDN给出的解释是:BFC是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。......

HTML系列之多媒体视频标签 video 多媒体视频标签 video

前端:vscode中使用npm安装依赖并运行项目 前端:vscode中使用npm安装依赖并运行项目

前端Vue之发布订阅模式 前端vue之发布订阅模式

Iframe通信 iframe通信