关注大师姐不迷路，大师姐带你上高度~

---

前言

关注大师姐不迷路，大师姐带你上高度~

uniapp是前端开发中经常用到的框架，可以实现一次开发多端部署；Vue3在开发中用的也越来越多，但是有个重复的地方是在用到组合式api的地方需要重复性的引入，那么就想有没有方法可以简化写法，自动引入呢？

一、组合式API是什么？

Vue 3 的组合式 API（Composition API）是一种更灵活的代码组织方式，相比选项式 API（Options API），它允许你按逻辑功能组织代码，而不是强制按照 data、methods、computed 等选项划分。

二、使用步骤

1.正常写法

代码如下：

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
 
onLoad(()=>{
	console.log('onLoad')
})

const count = ref(0);
const increment = () => count.value++;
</script>

2.自动引入，精简写法

引入插件

提示：这里大师姐使用的node版本是v18.12.1

npm install unplugin-auto-import --save-dev

创建vite.config.js

在项目的根目录下创建vite.config.js文件

vite.config.js文件内容配置

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
 
export default defineConfig({
    plugins: [
        uni(),      
        AutoImport({
            imports:[
                'vue',
                'uni-app'                
            ]
        })
    ]    
})

精简之后的写法

精简之后省去了引入api的麻烦，精简了代码，省时省力

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script setup> 
onLoad(()=>{
	console.log('onLoad')
})

const count = ref(0);
const increment = () => count.value++;
</script>

总结

关注大师姐不迷路，大师姐带你上高度~
1、安装unplugin-auto-import插件
2、配置vite.config.js文件
3、精简代码，省时省力