feat: 引入taro-ui组件库

package.json

@@ -42,45 +42,46 @@
     "@babel/runtime": "^7.21.5",
     "@tarojs/components": "3.6.25",
     "@tarojs/helper": "3.6.25",
-    "@tarojs/plugin-platform-weapp": "3.6.25",
+    "@tarojs/plugin-framework-react": "3.6.25",
     "@tarojs/plugin-platform-alipay": "3.6.25",
-    "@tarojs/plugin-platform-tt": "3.6.25",
-    "@tarojs/plugin-platform-swan": "3.6.25",
-    "@tarojs/plugin-platform-jd": "3.6.25",
-    "@tarojs/plugin-platform-qq": "3.6.25",
     "@tarojs/plugin-platform-h5": "3.6.25",
     "@tarojs/plugin-platform-harmony-hybrid": "3.6.25",
+    "@tarojs/plugin-platform-jd": "3.6.25",
+    "@tarojs/plugin-platform-qq": "3.6.25",
+    "@tarojs/plugin-platform-swan": "3.6.25",
+    "@tarojs/plugin-platform-tt": "3.6.25",
+    "@tarojs/plugin-platform-weapp": "3.6.25",
+    "@tarojs/react": "3.6.25",
     "@tarojs/runtime": "3.6.25",
     "@tarojs/shared": "3.6.25",
     "@tarojs/taro": "3.6.25",
-    "@tarojs/plugin-framework-react": "3.6.25",
-    "@tarojs/react": "3.6.25",
+    "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react": "^18.0.0"
+    "taro-ui": "^3.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
-    "@tarojs/cli": "3.6.25",
-    "@types/webpack-env": "^1.13.6",
-    "@tarojs/test-utils-react": "^0.1.1",
-    "@types/react": "^18.0.0",
-    "webpack": "5.78.0",
-    "@tarojs/taro-loader": "3.6.25",
-    "@tarojs/webpack5-runner": "3.6.25",
-    "babel-preset-taro": "3.6.25",
-    "eslint-config-taro": "3.6.25",
-    "eslint": "^8.12.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "react-refresh": "^0.11.0",
-    "eslint-plugin-react": "^7.8.2",
-    "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "stylelint": "^14.4.0",
-    "postcss": "^8.4.18",
-    "ts-node": "^10.9.1",
-    "@types/node": "^18.15.11",
+    "@tarojs/cli": "3.6.25",
+    "@tarojs/taro-loader": "3.6.25",
+    "@tarojs/test-utils-react": "^0.1.1",
+    "@tarojs/webpack5-runner": "3.6.25",
     "@types/jest": "^29.3.1",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.0",
+    "@types/webpack-env": "^1.13.6",
+    "babel-preset-taro": "3.6.25",
+    "eslint": "^8.12.0",
+    "eslint-config-taro": "3.6.25",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.5.0"
+    "jest-environment-jsdom": "^29.5.0",
+    "postcss": "^8.4.18",
+    "react-refresh": "^0.11.0",
+    "stylelint": "^14.4.0",
+    "ts-node": "^10.9.1",
+    "webpack": "5.78.0"
   }
 }

src/app.js

@@ -1,6 +1,7 @@
 
 import { useLaunch } from '@tarojs/taro'
 import './app.scss'
+import 'taro-ui/dist/style/index.scss' // 全局引入一次即可
 
 function App({ children }) {
 

src/app.scss

@@ -0,0 +1 @@
+@import "~taro-ui/dist/style/index.scss"; // 引入组件样式 - 方式二

src/pages/index/index.jsx

@@ -1,5 +1,8 @@
 import { View, Text } from '@tarojs/components'
 import { useLoad } from '@tarojs/taro'
+import { AtButton } from 'taro-ui'
+import { AtIcon } from 'taro-ui'
+import { AtAvatar } from 'taro-ui'
 import './index.scss'
 
 export default function Index() {
@@ -10,7 +13,12 @@ export default function Index() {
 
   return (
     <View className='index'>
+      <AtButton>按钮文案</AtButton>
+      <AtButton type='primary' size='small'>按钮文案</AtButton>
+      <AtButton type='primary' size='normal'>按钮文案</AtButton>
       <Text>Hello world1!</Text>
+      <View className='at-icon at-icon-settings'></View>
+      <AtAvatar text='凹凸实验室'></AtAvatar>
     </View>
   )
 }