未自动导入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]`
}
}
}
})