vue3+vite引入插件unplugin-auto-import的方法

自动引入 composition api，不需要再手动引入。
github地址：https://github.com/antfu/unplugin-auto-import

下载

npm i unplugin-auto-import -D

修改vite.config.ts文件

import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [vue(),AutoImport({
    imports: ['vue'],
    dts: 'src/auto-import.d.ts'
  })]
})

配置完毕后保存，此时会自动生成一个 auto-import.d.ts 的文件

现在我们可以在项目中写入代码， 可以看到我们没有手动引入 ref 也可以在项目中正常使用。

<template>
    <div>
        <button @click="flag = !flag">change flag</button>
        <div>{{ flag }}</div>
    </div>
</template>

<script setup lang="ts">
const flag = ref(false);
</script>

<style lang="less"></style>

到此这篇关于vue3+vite引入插件unplugin-auto-import的文章就介绍到这了,更多相关vue3引入插件unplugin-auto-import内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3+vite中使用import.meta.glob的操作代码

    vue3+vite中使用import.meta.glob的操作代码

    目录 前言: vue3中使用 import.meta.glob 具体方法: 前言: 在vue2的时候,我们一般引入多个js或者其他文件,一般使用  require.context 来引入多个不同的文件,但是vite中是不支持 require的,他推出了一个类似的功能,就是用import.meta.glob来引入多个,单个的文件. 这里说说他们的对比和区别: vue2 中使用  require 来引入多个不同的js文件 1.引入  modules 下的所有的js文件 const modulesFi

  • Vue3+Vite实现动态路由的详细实例代码

    Vue3+Vite实现动态路由的详细实例代码

    项目基本目录 1.首先定义初始默认的路由routes(router.js文件),vue文件使用import引入可以按需加载 import { createRouter, createWebHashHistory } from "vue-router"; import store from '../store/index.js' const routes = [{ path: "/login", component: () => import("../

  • vue3+vite自定义封装vue组件发布到npm包的全过程

    目录 创建项目 创建组件 导出组件 使用vite构建 打包 注册->登录npm 发布前准备 发布到npm 参考: 总结 创建项目 “vue”: “^3.2.8” “vite”: “^2.5.2” 习惯用HB的直接用创建vue3项目即可 或 npm init vite@latest 创建组件 打开项目 在src/components文件夹下新增文件,我这里叫TestBtn.vue <template> <button>我是测试要发布的按钮组件</button> &l

  • vue3 Vite 进阶rollup命令行使用详解

    目录 rollup介绍 以命令行方式打包 Tree Shaking Rollup 的命令行使用 命令行 format 格式 rollup.config.js 设置/获取环境变量 插件 plugins rollup介绍 开源类库优先选择 以 ESM 标准为目标的构建工具 Tree Shaking 以命令行方式打包 安装 rollup npm install -g rollup 创建 index.js 文件 import path from "path"; console.log(&quo

  • vue3+vite引入插件unplugin-auto-import的方法

    vue3+vite引入插件unplugin-auto-import的方法

    自动引入 composition api,不需要再手动引入.github地址:https://github.com/antfu/unplugin-auto-import 下载 npm i unplugin-auto-import -D 修改vite.config.ts文件 import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [vue(),AutoImport({ imp

  • vue3使用particles插件实现粒子背景的方法详解

    vue3使用particles插件实现粒子背景的方法详解

    目录 总结 效果(可以修改多种不同的样式效果) 1.安装 npm install particles.vue3 2.main.js import { createApp } from 'vue' import App from './App.vue' import router from "./router"; import Particles from "particles.vue3"; // 引入 const app = createApp(App); app.

  • vue3+vite项目中按需引入vant报错:Failed to resolve import的解决方案

    目录 问题描述 原因分析 解决方案 总结 问题描述 近日尝试使用vite+vue3+vant开发项目过程中,参考vant官网开发指南->快速上手->引入组件 按照上述配置好后,运行vite环境报错:Failed to resolve import 原因分析 根据报错信息,发现是vant的样式引入路径不对. 程序解析为:项目路径/node_modules/vant/lib/vant/es/组件/style 实际应该是:项目路径/node_modules/vant/lib/ vant/es/组件/

  • VUE3+vite项目中动态引入组件与异步组件的详细实例

    目录 一.全量注册,随用随取 1. 把项目中所有vue文件注册成异步组件. 2. 获取组件 3. 参考如下 二.使用@rollup/plugin-dynamic-import-vars插件 1.介绍 2.安装 3.使用 4.How it works 总结 一.全量注册,随用随取 1. 把项目中所有vue文件注册成异步组件. const app = createApp(App); function registerGlobalAsyncComponents(app: VueApp) { const

  • Vite引入虚拟文件的实现

    目录 背景 引入虚拟文件 例子 文档 Typescript支持 总结 背景 在新项目升级vue3以后,自然而然的就把vue-cli&webpack更换成了vite,不得不说vite真的很香,不仅编译速度刚刚的,而且在vue3的新功能上也有更好的支持. 不过在开发过程中也遇到了一些问题 在看到vite-plugin-pages插件之后,突然看到这样的写法: import routes from "virtual:generated-pages"; 其实在使用很多vite插件的时候

  • vue3+vite中使用vuex的具体步骤

    vue3+vite中使用vuex的具体步骤

    目录 前言: 具体步骤: 前言: 在vue3+vite创建的项目中使用vuex,要注意的是vite有部分写法和之前的webpack是不同的,比如,他不支持 require,想把vue2的项目直接升级到vue3的时候,需要改很多地方,如果非要使用vite也可以,记得改相关的内容. 具体步骤: 1.安装vuex( vue3建议 4.0+ ) pnpm i vuex -S 2.main.js中配置 import store from '@/store' // hx-app的全局配置 const app

  • 如何使用Vue3+Vite+TS快速搭建一套实用的脚手架

    目录 前言 技术栈 开始构建 1. 初始化项目 2. 代码校验 3.代码格式化 4.配置路由 5.配置状态管理器 6.element-plus 7.封装axios 8.mockjs 9.css预处理 结语 前言 Vue3出了已经有一段时间了,之前做的项目基本都是Vue2+webpack做的,正好现在马上要接一个新的项目,先手撸一套脚手架试试水~ 技术栈 开发工具:VSCode 代码管理:Git 前端框架:Vue3 构建工具:Vite 路由:vue-router 4x 状态管理:vuex 4x A

  • vue3+vite兼容低版本的白屏问题详解(安卓7/ios11)

    目录 如何兼容ios11 如何兼容安卓7 如何使用@vitejs/plugin-legacy 补充知识:vue打包项目以后白屏和图片加载不出来问题解决方法 总结 vue3打包后在低版本浏览器或webview中出现白屏,原因就是因为语法兼容问题.根据vite官方文档描述,build.target默认支持 Chrome >=87.Firefox >=78.Safari >=14.Edge >=88 传送,所以需要我们手动兼容低版本. 本篇以vite2.安卓7/ios11为例. 如何兼容

随机推荐