From 14b302bd1ad9eb8380941f53a4f8cec579bf109c Mon Sep 17 00:00:00 2001
From: FrozenArcher <yhy242989105@hotmail.com>
Date: Sun, 3 Mar 2024 02:53:49 +0800
Subject: [PATCH] change to class

---
 config/index.ts           |  8 +++++++-
 src/app.ts                |  1 +
 src/pages/index/index.tsx | 29 +++++++++++++++++++----------
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/config/index.ts b/config/index.ts
index 3d3a8eb..97dc8ff 100644
--- a/config/index.ts
+++ b/config/index.ts
@@ -27,7 +27,12 @@ export default defineConfig(async (merge, { command, mode }) => {
       }
     },
     framework: 'react',
-    compiler: 'webpack5',
+    compiler: {
+      type: 'webpack5',
+      prebundle: {
+        exclude: ['taro-ui']
+      }
+    },
     cache: {
       enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
     },
@@ -58,6 +63,7 @@ export default defineConfig(async (merge, { command, mode }) => {
       }
     },
     h5: {
+      esnextModules: ['taro-ui'],
       publicPath: '/',
       staticDirectory: 'static',
       output: {
diff --git a/src/app.ts b/src/app.ts
index 5e84a00..648f15b 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react'
 import { useLaunch } from '@tarojs/taro'
+import 'taro-ui/dist/style/index.scss'
 import './app.scss'
 
 function App({ children }: PropsWithChildren<any>) {
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index c9027c7..0f3dfd6 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,16 +1,25 @@
 import { View, Text } from '@tarojs/components'
-import { useLoad } from '@tarojs/taro'
 import './index.scss'
+import { Component, ReactNode } from 'react'
 
-export default function Index() {
+class Index extends Component {
+  state = {
+    msg: "Hello World!"
+  }
 
-  useLoad(() => {
-    console.log('Page loaded.')
-  })
+  onReady() {
+    console.log("Index is ready");
+  }
 
-  return (
-    <View className='index'>
-      <Text>Hello world!</Text>
-    </View>
-  )
+  render(): ReactNode {
+    return (
+      <View>
+        <Text>
+          {this.state.msg}
+        </Text>
+      </View>
+    )
+  }
 }
+
+export default Index