vite中 vue项目中引入并使用vant

vue3 来的同时。也带火了 vite,不过现在仍然是webpack称王的时代,vite也在快速发展中.

今天讲的主角是 vant, 那么在vite中使用

按照官方文档照样给我报错了

初始化 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

import {
    
     defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import styleImport, {
    
     VantResolve } from "vite-plugin-style-import";
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
    
    
  plugins: [
    vue(),
    styleImport({
    
    
      resolves: [VantResolve()],
    }),
  ],
  resolve: {
    
    
    alias: {
    
    
      '@': path.resolve(__dirname, 'src')
    }
  }
});

然后启动项目开始使用。已启动就给我们报错

在这里插入图片描述

但是好像瞅瞅看说我们的这个文件找不到了。我就很纳闷了
/node_modules/vant/lib/vant/es/button/style 他找的路径是这个
但是实际的路径根本就没有经过lib这个文件
在这里插入图片描述
然后我想着可能是插件默认找错了
然后就去看了下那个插件的配置信息
这个是在githup上看的。原地址是
其实官网已经更新到2.*版本。这个还是我在tag中找到的
https://github.com/vbenjs/vite-plugin-style-import/tree/v1.4.0

在这里插入图片描述

看到了这句话就知道你还可以自己配置插件的路径,如果找不到的话嘻嘻那么就可以了, 其实按照官方的文档上说的
vant/es/${name}/style/index 这样写其实也没有找到最后我想着往上去一级目录。就找到了。他那个默认添加的路径还是有问题的

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

这才我们项目正常跑起来了我们引入一个按钮试试看
在这里插入图片描述
这样正常显示。大功告成了。

其实上面的也给一些和博主一样的初级前端一些启发

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

关注我持续更新前端知识。

vite中 vue项目中引入并使用vant

猜你喜欢