关于Taro的一些问题

以下问题全部发生在windows上，Mac上未知

1. 安装

按照官网文档执行了yarn global add @tarojs/cli

image.png
中途没有报错，一切正常，然后执行taro init myApp，报错，重启shell也不行
image.png

这是因为yarn没有加到环境变量里，shell中输入yarn global bin，会得到一个yarn的安装目录，复制这个路径，到电脑的环境变量中，选path，添加上去

image.png

确定之后，必须要将shell重启，然后才能执行taro init myApp

还有个办法可以避免以上问题，直接用npm代替yarn,npm install -g @tarojs/cli，npm安装的taro-cli不用再手动加入环境变量

2. taro-ui安装

按照taro-ui官方的demo，安装后，在app.scss中加入@import "~taro-ui/dist/style/index.scss";，然后在页面组件上引入import { AtButton } from 'taro-ui'，报错
并且在不断地闪屏，无法停下来

image.png

这是因为项目里的taro版本是3.x，所以taro-ui也必须是3.x，目前taro-ui的正式版本只有2.x，只有beta版才是3.x。输入npm show taro-ui versions后可以看到

image.png

所以用yarn add taro-ui@3.1.0-beta.6即可

3. 找不到模块“react/jsx-runtime”或其相应的类型声明

ts的报错，会让标签下面跟着一堆红波浪线

image.png

还有些报错则是 xxx不能用作JSX组件，其元素类型不是有效的JSX组件，诸如此类

image.png

原因：
未知，应该是types有冲突
https://github.com/NervJS/taro/issues/11097
解决：
在types文件夹里添加jsx-runtime.d.ts，内容为

declare global {
  namespace JSX {
    // @ts-ignore
    type Element = any;
  }
}

export {};

然后在tsconfig.json中增加以下即可

 "compilerOptions": {
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "react/jsx-runtime": ["./types/jsx-runtime.d.ts"]
    }
  },

这样能解决View，Text组件的声明文件问题，但是无法解决AtButton这种Taro-ui的声明文件报错

3. TaroUI声明文件无法找到

image.png

点这个jsx.d.ts进去后发现，怎么会跳到vue的文件目录下，好恶心啊

image.png

直接删掉这个node_modules里的vue目录可以解决，但是总不能每次都手动删吧

发现这个vue包是被 taro-hooks包引入的依赖，那么不用taro-hooks这个包即可