Vue3's vite creates H5 project 4 (automatically import api, import van on demand)

Vue3's vite creates H5 project 4

1: Automatically import the ref of vue3 related api, etc. (unplugin-auto-import)

• pnpm i unplugin-auto-import -D

1-1 Automatically import the ref of vue3 related api

1-1 vite.config.ts configuration

import AutoImport from "unplugin-auto-import/vite"

export default ({
    
     command }: ConfigEnv): UserConfigExport =>{
    
    
	return {
    
    
		plugins: [
		  vue({
    
    }),
		  vueJsx(),
		  AutoImport({
    
    
			imports:['vue'],
			dts:'src/auto-import.d.ts'
		 })
		],
	}
}

• Generate the following files under src
  
• Simplified api import using

<template>
  <div>
	AboutIndex
	我是{
    
    {
    
     name1 }}
  </div>
</template>

<script setup lang="ts" name='AboutIndex'>
const name1 = ref<String>('ppp')
</script>

1-2 Generate a global declaration file

• pnpm i -D unplugin-auto-import

1-2-1 vite.config.ts configuration

AutoImport({
    
    
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/,
    /\.vue\?vue/, // .vue
    /\.md$/ // .md
  ],
  imports: ['vue', 'vue-router', '@vueuse/core'],
  // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
  dts: 'src/auto-import.d.ts',
  // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
  // 生成全局声明文件，给eslint用
  eslintrc: {
    
    
    enabled: true, // Default `false`
    filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
    globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  }
})

1-2-2 eslintrc.cjs | .js

module.exports = {
    
     
  extends: [
    // ...
    './.eslintrc-auto-import.json',
  ],
}

1-2-3 view-global-api

• If the page is not imported, use unplugin-auto-import/vite to automatically import hooks. An error will definitely be reported in the project. At this time, you need to import vue-global-api in the extends in eslintrc.
• pnpm i -D vue-global-api

// .eslintrc.js
module.exports = {
    
    
  extends: [
    'vue-global-api'
  ]
};

2: Automatic import + import van on demand

• pnpm i vant

2-1 vite.config.ts

import Components from 'unplugin-vue-components/vite';
import {
    
     VantResolver } from 'unplugin-vue-components/resolvers';
export default ({
    
     command }: ConfigEnv): UserConfigExport =>{
    
    
	return {
    
    
		plugins: [
				 Components({
    
    
					resolvers: [VantResolver()],
				  }),
		]
	}
}

2-2 use

<van-button type="primary">按钮</van-button>