• 通过npm安装yarn

npm install -g yarn

• 在一个新文件夹中创建vite项目（此时会创建失败）

yarn create vite

• 修改全局安装目录、缓存目录、yarn bin位置，使他们保持一致，再次创建，创建成功

yarn config set global-folder "D:\yarn\global"
yarn config set cache-folder "D:\yarn\cache"
yarn config set prefix "D:\yarn"

• 使用WebStorm打开（VScode版本问题，打开报语法错误），然后终端安装依赖

npm install

• 安装引入插件（用于引入组件）

npm i unplugin-vue-components -D

• 在vite.config.ts文件中配置引入插件，unplugin-vue-components 会解析模板并自动注册对应的组件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      Components({
          resolvers: [VantResolver()],
      }),
  ],
})

• 安装Vant

npm i vant