配置自动化导入(组件和页面)

自动导入页面和方法

1. 安装依赖

npm install unplugin-auto-import -D

2. 配置 vite.config.js

// vite.config.js
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import uni from "@dcloudio/vite-plugin-uni";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
    AutoImport({
      imports: ["vue", "uni-app", "pinia"],
      dts: true,
    }),
  ],
});

3.使用

<template>
  <view> {{ message }} </view>
</template>

<script setup>
  onLoad(() => {
    console.log("index onload");
  });
  const message = ref("Hello, world!");
</script>

<style scoped></style>

4. 运行

配置完后 重新执行 pnpm dev:mp-weixin 此时会生成 auto-imports.d.ts 文件

里面就是自动导入的文件

自动导入组件

找到 pages.json 文件

里面新增加 easycom 配置

INFO

第一个代表文件夹名称

第二个代表组件名称

如果文件夹和组件重名写一个就行

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},

		"easycom": {
			"autoscan": true,
			"custom": {
				"^(.*)-(.*)": "@/components/$1/$2.vue"
			}
		}

}

使用

• 在 src 目录下面的 components 目录下新建一个文件夹，文件夹名随意，比如：CustromButton

在这个文件夹下面新建两个文件例如 CustromButton.vue 和 Beifen.vue

• 结构如下

• CustromButton.vue

<template>
  <view>自定义按钮</view>
</template>

<script setup></script>

<style scoped></style>

• Beifen.vue

<template>
  <view>备份</view>
</template>

<script setup></script>

<style scoped></style>

• 页面里面使用

<template>
  <view>
    {{ message }}
    <CustromButton></CustromButton>
    <CustromButton-Beifen></CustromButton-Beifen>
    <CustromButton-CustromButton></CustromButton-CustromButton>
  </view>
</template>

<script setup>
  onLoad(() => {
    console.log("index onload");
  });
  const message = ref("Hello, world!");
</script>

<style scoped></style>

• 结果