uniapp自动引入Vue3(ref,reactive...)的API、uniapp生命周期和封装hooks

未自动导入Vue3(ref,reactive...)的API和uniapp生命周期，需要在每个页面把API和uniapp生命周期的代码都重复写一遍

<script setup>
  import { ref, reactive } from "vue"
  import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
   
  // 封装的hooks
  import { useList } from '@/hooks/useList.js'
  const { list, getList } = useList('/user/list','get')
  getList()
 
  const bool = ref(true)
 
  onLoad(() => {
     
  })
 
  onShow(() => {
     
  })
</script>

使用自动导入后，不需要在每个页面重复导入，简化的代码如下：

<script setup>
  // 封装的hooks
  const { list, getList } = useList('/user/list','get')
  getList()
 
  const bool = ref(true)
 
  onLoad(() => {
     
  })
 
  onShow(() => {
     
  })
</script>

安装 unplugin-auto-import 插件

1	`npm install unplugin-auto-import` `-D`

在项目文件 vite.config.js 导入并使用插件

import path from 'path'
import fs from 'fs-extra'
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
 
 
export default defineConfig({
    plugins: [
        uni(),
        copyFile(),
                // 自动导入配置
        AutoImport({
            imports:[
                // 预设
                'vue',
                'uni-app',
                // 自定义预设
                {
                    '@/store': ['useStore'],
                    '@/store/modules/theme': ['useThemeStore'],
                    '@/hooks/useList': ['useList'],
                    '@/hooks/useTheme': ['useTheme'],
                    '@/hooks/useShare': ['useShare']
                }
            ]
        })
    ],
    build: {
        terserOptions: {
            compress: {
                // 发布时删除 console
                drop_console: true,
            },
        },
        rollupOptions: {
            output:{ // 输出重构  打包编译后的 文件目录 文件名称 【模块名称.时间戳】
                // 入口文件名
                entryFileNames: `${filePath}[name]${Timestamp}.js`,
                // 块文件名
                chunkFilename: `${filePath}[name]${Timestamp}.js`,
                // 资源文件名 css 图片等等
                assetFileNames: `${filePath}[name]${Timestamp}.[ext]`
            }
        }
    }
})

vite.config.js完整代码：

import path from 'path'
import fs from 'fs-extra'
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
 
function copyFile() {
    return {
        enforce: 'post',
        async writeBundle() {
            await fs.copy(
                path.join(__dirname, '/static_sub'),
                path.join(__dirname + '/unpackage/', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, '/')
            )
        },
    }
}
 
let filePath = ''
let Timestamp = ''
//编译环境判断,判断是否H5环境
if (process.env.UNI_PLATFORM === 'h5') {
  filePath = 'assets/'; //打包文件存放文件夹路径
  Timestamp = '.' + new Date().getTime();//时间戳
}
 
export default defineConfig({
    plugins: [
        uni(),
        copyFile(),
        AutoImport({
            imports:[
                // 预设
                'vue',
                'uni-app',
                // 自定义预设
                {
                    '@/store': ['useStore'],
                    '@/store/modules/theme': ['useThemeStore'],
                    '@/hooks/useList': ['useList'],
                    '@/hooks/useTheme': ['useTheme'],
                    '@/hooks/useShare': ['useShare']
                }
            ]
        })
    ],
    build: {
        terserOptions: {
            compress: {
                // 发布时删除 console
                drop_console: true,
            },
        },
        rollupOptions: {
            output:{ // 输出重构  打包编译后的 文件目录 文件名称 【模块名称.时间戳】
                // 入口文件名
                entryFileNames: `${filePath}[name]${Timestamp}.js`,
                // 块文件名
                chunkFilename: `${filePath}[name]${Timestamp}.js`,
                // 资源文件名 css 图片等等
                assetFileNames: `${filePath}[name]${Timestamp}.[ext]`
            }
        }
    }
})