发布于2023-01-18 22:49 阅读(460) 评论(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文件,可以重新运行一下项目,或者关闭编辑器重新打开运行即可。
使用如下:
- <script setup lang="ts">
- // 这里我们不用引入ref直接使用
- const msg = ref<string>('Hello Vue3')
- </script>
-
- <template>
- {{ msg }}
- </template>
-
- <style scoped lang="scss"></style>
原文链接:https://blog.csdn.net/weixin_52020362/article/details/127841641
作者:天使的翅膀
链接:http://www.qianduanheidong.com/blog/article/494759/22c4f9429151932d90c8/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!