vue3之vite创建H5项目之4 ( 自动导入api、按需引入van)

vue3之vite创建H5项目之4

1:自动导入vue3相关api之ref等 (unplugin-auto-import)

  • pnpm i unplugin-auto-import -D

1-1 自动导入vue3相关api之ref

1-1 vite.config.ts 配置
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'
		 })
		],
	}
}
  • 在src下生成以下文件
    在这里插入图片描述
  • 使用简化了 api导入
<template>
  <div>
	AboutIndex
	我是{{ name1 }}
  </div>
</template>

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

1-2 生成全局声明文件

  • pnpm i -D unplugin-auto-import
1-2-1 vite.config.ts 配置
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 vue-global-api
  • 在页面没有引入的情况下,使用unplugin-auto-import/vite来自动引入hooks,在项目中肯定会报错的,这时候需要在eslintrc.js中的extends引入vue-global-api,这个插件是vue3hooks的,其他自己找找,找不到的话可以手动配置一下globals
  • pnpm i -D vue-global-api
// .eslintrc.js
module.exports = {
  extends: [
    'vue-global-api'
  ]
};

2: 自动导入 + 按需引入van

  • 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 使用

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

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值