init

.gitignore

@@ -0,0 +1,8 @@
+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store
+.swc
+.idea

babel.config.js

@@ -0,0 +1,10 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'vue3',
+      ts: true
+    }]
+  ]
+}

components.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    Counter: typeof import('./src/components/Counter.vue')['default']
+    NutButton: typeof import('@nutui/nutui-taro')['Button']
+  }
+}

config/dev.js

@@ -0,0 +1,9 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"development"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {}
+}

config/index.js

@@ -0,0 +1,120 @@
+import Components from 'unplugin-vue-components/webpack';
+import NutUIResolver from '@nutui/auto-import-resolver';
+
+const config = {
+  projectName: 'wxapp-visitor-invert',
+  date: '2023-12-18',
+  designWidth (input) {
+    if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) {
+      return 375
+    }
+    return 750
+  },
+  deviceRatio: {
+    640: 2.34 / 2,
+    750: 1,
+    828: 1.81 / 2,
+    375: 2 / 1
+  },
+  sourceRoot: 'src',
+  outputRoot: 'dist',
+  plugins: ['@tarojs/plugin-html'],
+  defineConstants: {
+  },
+  copy: {
+    patterns: [
+    ],
+    options: {
+    }
+  },
+  framework: 'vue3',
+  compiler: {
+    type: 'webpack5',
+    prebundle: { enable: false }
+  },
+  cache: {
+    enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
+  },
+  mini: {
+    webpackChain(chain) {
+      chain.merge({
+        module: {
+          rule: {
+            mjsScript: {
+              test: /\.mjs$/,
+              include: [/pinia/],
+              use: {
+                babelLoader: {
+                  loader: require.resolve('babel-loader')
+                }
+              }
+            }
+          }
+        }
+      })
+      chain.plugin('unplugin-vue-components').use(Components({
+        include: [
+          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+          /\.vue$/, /\.vue\?vue/, // .vue
+        ],
+        resolvers: [NutUIResolver({taro: true})]
+      }))
+    },
+    postcss: {
+      pxtransform: {
+        enable: true,
+        config: {
+          // selectorBlackList: ['nut-']
+        }
+      },
+      url: {
+        enable: true,
+        config: {
+          limit: 1024 // 设定转换尺寸上限
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  },
+  h5: {
+    webpackChain(chain) {
+      chain.plugin('unplugin-vue-components').use(Components({
+        include: [
+          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+          /\.vue$/, /\.vue\?vue/, // .vue
+        ],
+        resolvers: [NutUIResolver({taro: true})]
+      }))
+    },
+    publicPath: '/',
+    staticDirectory: 'static',
+    esnextModules: ['nutui-taro', 'icons-vue-taro'],
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  }
+}
+
+module.exports = function (merge) {
+  if (process.env.NODE_ENV === 'development') {
+    return merge({}, config, require('./dev'))
+  }
+  return merge({}, config, require('./prod'))
+}

config/prod.js

@@ -0,0 +1,37 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"production"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {
+    /**
+     * WebpackChain 插件配置
+     * @docs https://github.com/neutrinojs/webpack-chain
+     */
+    // webpackChain (chain) {
+    //   /**
+    //    * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
+    //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
+    //    */
+    //   chain.plugin('analyzer')
+    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+
+    //   /**
+    //    * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
+    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
+    //    */
+    //   const path = require('path')
+    //   const Prerender = require('prerender-spa-plugin')
+    //   const staticDir = path.join(__dirname, '..', 'dist')
+    //   chain
+    //     .plugin('prerender')
+    //     .use(new Prerender({
+    //       staticDir,
+    //       routes: [ '/pages/index/index' ],
+    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
+    //     }))
+    // }
+  }
+}

package.json

@@ -0,0 +1,87 @@
+{
+  "name": "jsx",
+  "version": "1.0.0",
+  "private": true,
+  "description": "jsx",
+  "templateInfo": {
+    "name": "vue3-NutUI4",
+    "typescript": true,
+    "css": "sass"
+  },
+  "scripts": {
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "build:qq": "taro build --type qq",
+    "build:jd": "taro build --type jd",
+    "build:quickapp": "taro build --type quickapp",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch",
+    "dev:qq": "npm run build:qq -- --watch",
+    "dev:jd": "npm run build:jd -- --watch",
+    "dev:quickapp": "npm run build:quickapp -- --watch"
+  },
+  "browserslist": [
+    "last 3 versions",
+    "Android >= 4.1",
+    "ios >= 8"
+  ],
+  "author": "",
+  "dependencies": {
+    "@babel/runtime": "^7.23.4",
+    "@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",
+    "graphql": "^16.8.1",
+    "graphql-tag": "^2.12.6",
+    "moment": "^2.29.4",
+    "pinia": "^2.1.7",
+    "vue": "^3.3.8"
+  },
+  "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",
+    "@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",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.54.0",
+    "eslint-config-taro": "3.6.19",
+    "eslint-plugin-vue": "^9.18.1",
+    "style-loader": "^3.3.3",
+    "stylelint": "^15.11.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.3.2",
+    "unplugin-vue-components": "^0.25.2",
+    "vue-loader": "^17.3.1",
+    "webpack": "^5.89.0"
+  }
+}

project.config.json

@@ -0,0 +1,15 @@
+{
+  "miniprogramRoot": "./dist",
+  "projectname": "taro",
+  "description": "",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "enhance": false,
+    "compileHotReLoad": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}

project.tt.json

@@ -0,0 +1,13 @@
+{
+  "miniprogramRoot": "./",
+  "projectname": "jsx",
+  "description": "jsx",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}

src/app.config.ts

@@ -0,0 +1,11 @@
+export default defineAppConfig({
+  pages: [
+    'pages/index/index'
+  ],
+  window: {
+    backgroundTextStyle: 'light',
+    navigationBarBackgroundColor: '#fff',
+    navigationBarTitleText: 'WeChat',
+    navigationBarTextStyle: 'black'
+  }
+})

src/app.ts

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import './app.scss'
+import '@nutui/touch-emulator'
+
+const App = createApp({
+  onShow (options) {},
+  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
+})
+App.use(createPinia())
+
+export default App

src/components/Counter.vue

@@ -0,0 +1,41 @@
+<template>
+  <view>
+    <text class="title">{{ counter.count }}</text>
+    <view class="button" @tap="onAdd">ADD</view>
+  </view>
+</template>
+
+<script>
+import { useCounterStore } from '../stores/counter'
+
+export default {
+  setup() {
+    const counter = useCounterStore()
+
+    const onAdd = () => {
+      counter.count++
+
+      // with autocompletion ✨
+      // counter.$patch({count: counter.count + 1})
+
+      // or using an action instead
+      // counter.increment()
+    }
+
+    return {
+      counter,
+      onAdd
+    }
+  }
+}
+</script>
+
+<style>
+.title {
+  font-size: 32px;
+}
+.button {
+  border: 1px solid lightgray;
+  padding: 5px 10px;
+}
+</style>

src/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="format-detection" content="telephone=no,address=no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="white">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
+  <title>jsx</title>
+  <script><%= htmlWebpackPlugin.options.script %></script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

src/pages/index/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '首页'
+})

src/pages/index/index.scss

@@ -0,0 +1,12 @@
+.content{
+    font-family: "Avenir", Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    margin-top: 40%;
+    padding: 0 20px;
+}
+.nut-cell{
+    display: flex;
+    justify-content: space-between;
+}

src/pages/index/index.tsx

@@ -0,0 +1,36 @@
+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/stores/counter.ts

@@ -0,0 +1,26 @@
+// https://pinia.esm.dev/introduction.html
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', {
+  state: () => {
+    return { count: 0 }
+  },
+  // could also be defined as
+  // state: () => ({ count: 0 })
+  actions: {
+    increment() {
+      this.count++
+    },
+  },
+})
+
+// You can even use a function (similar to a component setup()) to define a Store for more advanced use cases:
+// export const useCounterStore = defineStore('counter', () => {
+//   const count = ref(0)
+//
+//   function increment() {
+//     count.value++
+//   }
+//
+//   return {count, increment}
+// })

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "commonjs",
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "outDir": "lib",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strictNullChecks": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "rootDir": ".",
+    "jsx": "preserve",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ]
+  },
+  "include": ["./src", "./types", "components.d.ts"],
+  "compileOnSave": false
+}

types/global.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="@tarojs/taro" />
+
+declare module '*.png';
+declare module '*.gif';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg';
+declare module '*.css';
+declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.styl';
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
+  }
+}
+
+declare module '@tarojs/components' {
+  export * from '@tarojs/components/types/index.vue3'
+}

types/vue.d.ts

@@ -0,0 +1,10 @@
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents extends JSX.IntrinsicElements {
+    /** Note: Vue 在 runtime 中将 JSX.IntrinsicElements 通过 index signature 重复声明标签
+     * 这会导致插件无法正常跳转类型，可以手动覆盖声明标签活得更好的体验，参考如下：
+     * 'scroll-view': JSX.IntrinsicElements['scroll-view']
+     */
+  }
+}