使用vite创建的项目怎么把全局引入改为按需引入

在使用Vite创建的项目中，你可以使用vite-plugin-style-import 插件来实现按需引入。以下是修改步骤：

1. 安装vite-plugin-style-import插件：

   npm install vite-plugin-style-import -D

2. 在项目的vite.config.js配置文件中添加以下内容：

   import { defineConfig } from 'vite';
   import styleImport from 'vite-plugin-style-import';

   export default defineConfig({
     plugins: [
       styleImport({
         libs: [
           {
             libraryName: 'element-plus',
             esModule: true,
             resolveStyle: (name) => {
               return `element-plus/lib/theme-chalk/${name}.css`;
             },
           },
         ],
       }),
     ],
   });

注意替换`element-plus`为你使用的UI库的名称，例如`vant`或者`ant-design-vue`，同时根据UI库的目录结构调整`resolveStyle`方法中的路径。

3. 在需要的地方按需引入组件，例如：

   import { ElButton, ElInput } from 'element-plus';

这样只会引入需要的组件，而不是全部组件。

4. 运行项目，Vite会自动按需引入样式文件。

这样就完成了将Vite项目中的全局引入改为按需引入的操作。记得先安装相应的UI库，并根据需要按需引入需要的组件。