QA：常见问题查看这里

[eiinu]

NutUI Vue 相关的一些使用问题或者限制

[eiinu]

一、按需引入与 unplugin 插件

1、使用 JSX、TSX 编写项目时无法实现自动按需引入

unplugin-vue-components 插件的默认配置不识别 JSX、TSX 文件，需要手动添加 include 字段：

Components({
  include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
  resolvers: [NutUIResolver()],
})

2、使用自动按需引入时组件没有类型提示

unplugin-vue-components 插件会为引入的组件自动生成全局类型文件 components.d.ts，请保留该文件并在 tsconfig.json 中将它添加至 include 字段中。

{
  "include": ["components.d.ts"]
}

[eiinu]

Overlay、Popup、Dialog 等弹层组件的滚动穿透

lock-scroll 只能阻止背景遮罩的滚动穿透问题

内部元素依然有滚动穿透

需要添加 catch-move

<template>
  <nut-popup :catch-move="true">

  </nut-popup>
</template>

开启 catch-move 之后，内容过长时无法滑动

需要内部套一层 scroll-view

<template>
  <nut-popup :catch-move="true">
    <scroll-view>
        ......
    </scroll-view>
  </nut-popup>
</template>

[eiinu]

关于 Prebundle 与 Cache

表现1：使用组件后，微信小程序无内容，控制台警告找不到 template
表现2：控制台报错，找不到某某文件，文件名称中包含了 prebundle

可能的原因：开启了 Webpack 预加载或者 cache，Taro 框架下该模式会偶发丢失第三方组件库文件。
需要在 config/index 中将 NutUI 剔除掉并关闭 cache：

module.exports = {
  // ...
  compiler: {
    type: 'webpack5',
    prebundle: {
      exclude: ['@nutui/nutui-taro', '@nutui/icons-vue-taro']
    }
  },
  cache: {
    enable: false
  }
}

[eiinu]

出现 [mini-css-extract-plugin] Conflicting order 报错

环境：Taro 小程序

1、如果你的文件中出现了下面这种使用方式，在不同的页面中引入相同样式时的顺序不同，mini-css-extract-plugin 插件将认为这是错误的，因为样式的先后顺序可能会影响实际的表现效果。

// a.js
import 'button.css'
import 'cell.css'

// b.js
import 'cell.css'
import 'button.css'

2、由于 NutUI 项目默认推荐使用 unplugin-vue-components 进行组件代码和样式的引入，实际的引入顺序是该插件根据 template 中标签的使用顺序生成的，无法从外部手动调整组件引入顺序以消除此报错。

NutUI 各个组件的样式之间没有冲突，即其顺序是无关紧要的，所以可以通过以下设置来关闭这种错误提示：

// config/index.js
export default {
  mini: {
    miniCssExtractPluginOption: {
      ignoreOrder: true
    }
  }
}

你也可以不使用 unplugin-vue-components 插件这种自动按需引入样式的方式，而是在项目入口处手动注册组件、引入对应组件的样式，这样所有组件样式的顺序由自己控制，当然不会出现这个问题，但是实在很麻烦。

[eiinu]

自定义 Tabbar 中 icon 图标无法显示

Taro 下自定义 tabBar 默认存在样式隔离，无法引用到全局样式中的字体文件，需要手动配置：

<script>
  export default {
    options: {
      addGlobalClass: true,
    },
  }
</script>

相关 issue：NervJS/taro#11060
Taro 文档：https://docs.taro.zone/docs/custom-tabbar