如何给 unplugin-vue-components/vite 写一个简单的 resolver

最新推荐文章于 2024-08-09 08:14:33 发布

是阿臻

最新推荐文章于 2024-08-09 08:14:33 发布

阅读量956

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43191327/article/details/135463753

版权

本文介绍如何在Vue项目中使用unplugin-vue-components框架，处理组件导入时的重命名和副作用管理，如根据组件名判断并转换导入路径，同时处理如CSS文件等额外资源的导入。

摘要由CSDN通过智能技术生成

大部分工作 unplugin-vue-components 都已经处理好了, 我们只需要接收组件名来判断是否是自己的组件, 然后处理对应的导入逻辑。

一共 3 个字段

as 重命名类似 import { componentNameReName } from ‘xxxx’
name 组件名 import { componentName } from ‘xxxx’
from 导入路径, 此处你可以根据自己需要来处理对应的路径
sideEffects 此处字段是一个数组, 中文意思是副作用，可以理解为组件的其他附加文件。比如你需要导入一个 button 组件, 但是又需要导入他的 css 文件, 此时就可以使用这个字段了。

demo

export default (componentName) => {
  if (componentName.startsWith('U')) {
    const name = convertCamelCaseToDash(componentName)
    return { as: componentName, from: `uview-plus/components/${name}/${name}.vue` }
  }
}

function convertCamelCaseToDash(str: string) {
  return str.replace(/([A-Z])/g, (match, letter, index) =>
    index === 0 ? letter.toLowerCase() : `-${letter.toLowerCase()}`)
}