Vite+Vue3+Vant4+TypeScript安装流程

以下是使用Vite、Vue 3、Vant 4和TypeScript创建新项目的步骤：

1. 确保你已安装Node.js（建议版本8以上）。

2. 安装或升级Vite到最新版本：

   
   
   
   npm init vite@latest my-vue-app --template vue-ts

   或者使用yarn：

   
   
   
   yarn create vite my-vue-app --template vue-ts

3. 进入创建的项目文件夹：

   
   
   
   cd my-vue-app

4. 安装Vant 4：

   
   
   
   npm install vant@next

   或者使用yarn：

   
   
   
   yarn add vant@next

5. 由于Vant 4使用了新的组件库模式，你需要安装按需导入的插件babel-plugin-import：

   
   
   
   npm install babel-plugin-import -D

   或者使用yarn：

   
   
   
   yarn add babel-plugin-import -D

6. 配置babel.config.js或者babel配置部分，加入Vant按需导入的配置：

   
   
   
   // babel.config.js
   module.exports = {
     presets: ['@vue/cli-plugin-babel/preset'],
     plugins: [
       [
         'import',
         {
           libraryName: 'vant',
           customStyleName: (name) => `${name}/style`,
         },
       ],
     ],
   };

7. 在vite.config.js中配置Vant组件的自动导入：

   
   
   
   // vite.config.js
   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import vant from 'vant';
    
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [vue(), vant()],
   });

8. 现在你可以在Vue文件中直接使用Vant组件了，例如：

   
   
   
   <template>
     <van-button type="primary">按钮</van-button>
   </template>
    
   <script lang="ts">
   import { defineComponent } from 'vue';
   import { Button } from 'vant';
    
   export default defineComponent({
     components: {
       [Button.name]: Button,
     },
   });
   </script>

以上步骤将帮助你创建并配置一个新的Vue 3项目，并使用Vant 4提供的组件。