什么网站做一手项目好,海外网站推广方法,电商网站建设布局,网站备案需要关闭网站吗是否还在为每次都需要导入框架方法而烦恼呢#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
