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 插件

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]`
			}
		}
	}
})