my first vue attempt

components.d.ts

@@ -9,5 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     Counter: typeof import('./src/components/Counter.vue')['default']
     NutButton: typeof import('@nutui/nutui-taro')['Button']
+    NutCell: typeof import('@nutui/nutui-taro')['Cell']
+    NutPopup: typeof import('@nutui/nutui-taro')['Popup']
   }
 }

package.json

@@ -39,20 +39,20 @@
     "@nutui/icons-vue-taro": "^0.0.9",
     "@nutui/nutui-taro": "^4.2.1",
     "@nutui/touch-emulator": "^1.0.0",
-    "@tarojs/components": "3.6.19",
-    "@tarojs/helper": "3.6.19",
-    "@tarojs/plugin-framework-vue3": "3.6.19",
-    "@tarojs/plugin-html": "3.6.19",
-    "@tarojs/plugin-platform-alipay": "3.6.19",
-    "@tarojs/plugin-platform-h5": "3.6.19",
-    "@tarojs/plugin-platform-jd": "3.6.19",
-    "@tarojs/plugin-platform-qq": "3.6.19",
-    "@tarojs/plugin-platform-swan": "3.6.19",
-    "@tarojs/plugin-platform-tt": "3.6.19",
-    "@tarojs/plugin-platform-weapp": "3.6.19",
-    "@tarojs/runtime": "3.6.19",
-    "@tarojs/shared": "3.6.19",
-    "@tarojs/taro": "3.6.19",
+    "@tarojs/components": "3.6.20",
+    "@tarojs/helper": "3.6.20",
+    "@tarojs/plugin-framework-vue3": "3.6.20",
+    "@tarojs/plugin-html": "3.6.20",
+    "@tarojs/plugin-platform-alipay": "3.6.20",
+    "@tarojs/plugin-platform-h5": "3.6.20",
+    "@tarojs/plugin-platform-jd": "3.6.20",
+    "@tarojs/plugin-platform-qq": "3.6.20",
+    "@tarojs/plugin-platform-swan": "3.6.20",
+    "@tarojs/plugin-platform-tt": "3.6.20",
+    "@tarojs/plugin-platform-weapp": "3.6.20",
+    "@tarojs/runtime": "3.6.20",
+    "@tarojs/shared": "3.6.20",
+    "@tarojs/taro": "3.6.20",
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "moment": "^2.29.4",
@@ -62,19 +62,19 @@
   "devDependencies": {
     "@babel/core": "^7.23.3",
     "@nutui/auto-import-resolver": "^1.0.0",
-    "@tarojs/cli": "3.6.19",
-    "@tarojs/taro-loader": "3.6.19",
-    "@tarojs/webpack5-runner": "3.6.19",
+    "@tarojs/cli": "3.6.20",
+    "@tarojs/taro-loader": "3.6.20",
+    "@tarojs/webpack5-runner": "3.6.20",
     "@types/node": "^18.18.12",
     "@types/webpack-env": "^1.18.4",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "@vue/babel-plugin-jsx": "^1.1.5",
     "@vue/compiler-sfc": "^3.3.8",
-    "babel-preset-taro": "3.6.19",
+    "babel-preset-taro": "3.6.20",
     "css-loader": "^6.8.1",
     "eslint": "^8.54.0",
-    "eslint-config-taro": "3.6.19",
+    "eslint-config-taro": "3.6.20",
     "eslint-plugin-vue": "^9.18.1",
     "style-loader": "^3.3.3",
     "stylelint": "^15.11.0",

project.config.json

@@ -1,8 +1,8 @@
 {
   "miniprogramRoot": "./dist",
-  "projectname": "taro",
+  "projectname": "wxapp-visitor-invite",
   "description": "",
-  "appid": "touristappid",
+  "appid": "wx0678f6f9ae39857e",
   "setting": {
     "urlCheck": true,
     "es6": false,

src/pages/index/index.tsx

@@ -1,36 +0,0 @@
-import { reactive } from 'vue'
-import { View, Text } from '@tarojs/components'
-import './index.scss'
-import Counter from '../../components/Counter.vue'
-
-
-export default {
-  name: 'Index',
-  components: {
-    Counter
-  },
-  setup() {
-    const state = reactive({
-      msg: '欢迎使用 NutUI4.0 开发小程序',
-      msg2: '你成功了～',
-      isVisible1: false,
-      val: ''
-    })
-
-    const handleClick = msg => {
-      state.msg = msg
-    }
-
-    return () => {
-      return (
-        <View class='content'>
-          <view className="index">
-            <Counter/>
-          </view>
-          <View><Text>{state.msg}</Text></View>
-          <nut-button type="primary" onClick={() => handleClick(state.msg2)}>点我</nut-button>
-        </View>
-      )
-    }
-  }
-}

src/pages/index/index.vue

@@ -0,0 +1,41 @@
+<script setup>
+  import { reactive, onMounted } from 'vue'
+  import { View, Text } from '@tarojs/components'
+  import './index.scss'
+  import Counter from '../../components/Counter.vue'
+  import { ref } from 'vue';
+  import {useDidShow, useLoad} from "@tarojs/taro";
+
+  const show = ref(false);
+
+  const state = reactive({
+    msg: '欢迎使用 NutUI4.0 开发小程序',
+    msg2: '你成功了～',
+    isVisible1: false,
+    val: ''
+  })
+
+  const handleClick = msg => {
+    state.msg = msg
+  }
+
+  useDidShow(() => {
+    console.log("did show is run xxxxxxx.")
+  })
+
+  useLoad(() => {
+    console.log("use load  is run xxxxxxx.")
+  })
+
+</script>
+
+
+<template>
+  <Counter/>
+  <nut-cell title="展示弹出层" is-link @click="show = true"></nut-cell>
+  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="show">正文</nut-popup>
+  <View><Text>{{state.msg}}</Text></View>
+  <nut-button type="primary" @click="handleClick(state.msg2)">点我</nut-button>
+</template>
+
+

types/global.d.ts

@@ -19,4 +19,4 @@ declare namespace NodeJS {
 
 declare module '@tarojs/components' {
   export * from '@tarojs/components/types/index.vue3'
-}
+}