vite + vue3 + ts + pnpm 初始化项目（减少import语句）

开发工具：vscode + volar

初始化项目（任选其一）, 以 pnpm 为例

1. 使用 NPM: 

npm init vite@latest

2. 使用 YARN:  

yarn create vite

3. 使用 PNPM:  

pnpm create vite

启动项目

pnpm install

pnpm run dev

安装依赖 

无需导入vue函数及组件

1. unplugin-auto-import      vue函数自动导入，不用再添加import语句
2. unplugin-vue-components   vue组件库自动按需导入

vite.config.ts 文件修改如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      include: [/\.[tj]sx?$/, /\.vue$/, /\.md$/],
      imports: ['vue', 'vue-router'],
      dts: 'src/auto-imports.d.ts', // 默认生成的文件在根目录
    }),
    Components({
      dirs: ['src/components'],
      extensions: ['vue'],
      deep: true,
      dts: 'src/components.d.ts',
      include: [/\.vue$/, /\.vue\?vue/],
      directoryAsNamespace: false,
    }),
  ]
})

示例如下（注释的内容可删除）

<script setup lang="ts">
// import { ref } from 'vue'
// import { Button } from '../Base/Button.vue'

defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>
  <Button size="16"></Button>
</template>