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?$ / ,
/ \. vue$/ ,
/ \.vue\?vue / ,
/ \. md$/
] ,
imports : [ 'vue' , 'vue-router' , '@vueuse/core' ] ,
dts : 'src/auto-import.d.ts' ,
eslintrc : {
enabled : true ,
filepath : './.eslintrc-auto-import.json' ,
globalsPropValue : true
}
} )
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
module. exports = {
extends : [
'vue-global-api'
]
} ;
2: Automatic import + import van on demand
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>