网站开发与设计模板,上海做网站较好的公司,免费的wordpress,php 网站301是否还在为每次都需要导入框架方法而烦恼呢#xff1f;
// 每次都需手动导入框架方法
import { ref } from vuelet num ref(0)用 unplugin-auto-import 来帮你吧#xff0c;以后只需这样写就行啦#xff01;
let num ref(0)官方示例如下图 使用流程 1. 安装 unplugin-au…是否还在为每次都需要导入框架方法而烦恼呢
// 每次都需手动导入框架方法
import { ref } from vuelet num ref(0)用 unplugin-auto-import 来帮你吧以后只需这样写就行啦
let num ref(0)官方示例如下图 使用流程 1. 安装 unplugin-auto-import
npm i -D unplugin-auto-import2. vite 配置中导入
vite.config.ts
import AutoImport from unplugin-auto-import/vite
// 项目中集成了 unplugin-vue-router 时此处导入VueRouterAutoImports 需用 代替 vue-router
import { VueRouterAutoImports } from unplugin-vue-routerplugins 中加入 AutoImport plugins: [// VueRouter 必须在 vue() 之前VueRouter({}),Layouts({layoutsDirs: src/layouts, // 指定布局文件的目录路径defaultLayout: default // 指定默认布局文件的名称}),vue(),vueJsx(),vueDevTools(),AutoImport({// 解析的文件类型include: [/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/, // .vue/\.md$/ // .md],// 需自动导入方法的库imports: [vue,// 项目中集成了 unplugin-vue-router 时此处需用 VueRouterAutoImports 替换掉 vue-routerVueRouterAutoImports]})],3. 添加 ts 相关配置
tsconfig.app.json 的 include 中添加 auto-imports.d.ts ,最终效果如下 include: [env.d.ts, src/**/*, src/**/*.vue, auto-imports.d.ts],4. 重启 vscode
以便触发插件对相关文件的识别和解析
5. 重启项目
会重新生成 auto-imports.d.ts 文件内部可见自动导入的框架方法
通过下方代码测试效果
script setup langts
let num ref(0)
/scripttemplatediv{{ num }}/div
/template若页面正常渲染无报错恭喜配置成功 更多配置和用法见官网 https://www.npmjs.com/package/unplugin-auto-import
