uni.app 配置自动导入(unplugin-auto-import/vite)

uni.app cli搭建项目配置自动导入

先安装 unplugin-auto-import unplugin-vue-components

npm i unplugin-auto-import
npm i unplugin-vue-components

在vite.config.js配置如下

import { defineConfig } from "vite"
import uni from "@dcloudio/vite-plugin-uni"
// 加上下面这一行
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
    plugins: [
        uni(),
        // 加上下面的配置
        AutoImport({
            include: [
                /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
                /\.vue$/,
                /\.vue\?vue/, // .vue
            ],
            imports: [
                'vue',
                'uni-app',
                'pinia',
            ],
            dts: 'typings/auto-imports.d.ts',
        }),
        Components({
            // dirs 指定组件所在位置，默认为 src/components
            // 可以让我们使用自己定义组件的时候免去 import 的麻烦
            dirs: ['src/components'],
            // 配置需要将哪些后缀类型的文件进行自动按需引入，'vue'为默认值
            // extensions: ['vue'],
            // // 解析组件，这里以 Element Plus 为例
            // // resolvers: [],
            // // 生成components.d.ts
            dts: 'components.d.ts',
            // // 遍历子目录
            // deep: true,
        }),
    ],
})

jsconfig.json配置如下

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "removeComments": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "noImplicitThis": true,
    "noEmitOnError": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["es2020", "dom","es5", "es6", "dom.iterable"],
    "skipLibCheck": true,
    "types": ["vite/client", "node"]
  },
  // 这里
  "include": ["src/**/*", "src/**/*.vue", "config/**/*", "./components.d.ts"],
  "exclude": ["node_modules", "dist", "dist-beta", "dist-production"]
}

配置自动导入

// 不使用自动导入的用法
<script lang="ts" setup>
import { ref } form 'vue'
import { onLoad } from '@dcloudio/uni-app'

const name = ref('热爱生活的正道的光')

onLoad(() => {
	console.log(name.value)
})
</script>

// 使用自动导入的用法
<script lang="ts" setup>
const name = ref('热爱生活的正道的光')

onLoad(() => {
	console.log(name.value)
})
</script>