React使用taro+NutUI组件库开发小程序

创建项目

npx 创建 taro 项目

npx @tarojs/cli init 项目名

查看

npm info @tarojs/cli

安装其他依赖

✘ 安装项目依赖失败，请自行重新安装！

项目已经创建成功 只是依赖没有安装成功

进入项目 cd 项目名 安装 yarn 或者 npm install

编译运行

package.json查看运行命令

build打包

dev开发环境

查看运行界面

在微信小程序打开项目中dist文件夹

安装NutUI组件库

安装

yarn add @nutui/nutui-react-taro

解决报错

opensslErrorStack: \[ 'error:03000086\:digital envelope routines::initialization error' ],

library: 'digital envelope routines',

reason: 'unsupported',

code: 'ERR\_OSSL\_EVP\_UNSUPPORTED'

$env:NODE_OPTIONS="--openssl-legacy-provider"

安装 @tarojs/plugin-html

version 必须与项目中 Taro 版本保持一致

npm i @tarojs/plugin-html@version

示例

//package.json查看版本号
"@tarojs/taro": "3.6.30",

安装命令
npm i @tarojs/plugin-html@3.6.30

配置

1. 1.

   打开 config/index.js

2. 2.

   覆盖原有的属性

config = {
  // 开启 HTML 插件
  plugins: ['@tarojs/plugin-html'],
  designWidth (input) {
    // 配置 NutUI 375 尺寸
    if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) {
      return 375
    }
    // 全局使用 Taro 默认的 750 尺寸
    return 750
  },
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1
  }
}

全局引入

import '@nutui/nutui-react-taro/dist/style.css'