Vite+vantUI按需引入

vue3 来的同时。也带火了 vite,不过现在仍然是webpack称王的时代,vite也在快速发展中
今天讲的主角是 vant, 那么在中使用
按照官方文档 照样给我报错了
真的忍不住吐槽一下（😤😤😤😤）
废话不多说了 直接上代码

初始化 vite项目之后
安装vant

npm install vant --save
yarn add vent --save

在vite中使用vant还需要其他的插件辅助, 就是vite-plugin-style-import
这里官方推荐的是 1.4.1版本

yarn add vite-plugin-style-import@1.4.1 --save

然后就是在项目中配置下 vite.config.js(这里很重要！！！)

    styleImport({
      resolves: [VantResolve()],
      libs: [
        {
          libraryName: "vant",
          esModule: true,
          resolveStyle: (name) => `../es/${name}/style`,
        },
      ],
    }),

然后就是在页面的使用了（也很无语！！！）

  <Button type="success">11111111</Button>
  <Empty description="描述文字" />
 
  import { Button,Empty } from 'vant';

然后我们看一下引入成功的样式

这样显示正常，大功告成了！！！ 其实上面也给和博主一些启发

1. 首先不要害怕问题
2. 定位问题所在
3. 逐步分析 一步一步去查找
4. 要敢于查看或者翻译英语句子 可能你想要的答案就在那一句中
5. 总结和思考