xingli

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

Option 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error.
  Use 'verbatimModuleSyntax' instead.ts

  "compilerOptions": {
    "ignoreDeprecations": "5.0"
  },

<image mode="xxx"></image>

npm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

// tsconfig.json
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext","dom"],
    "types": [
      "@dcloudio/types", // uni-app API types
      "miniprogram-api-typings", // Native WeChat mini-program types
      "@uni-helper/uni-app-types" // uni-app component types
    ]
  },
  // Vue compiler types, check tag types
  "vueCompilerOptions": {
    "nativeTags": ["block","component","template","slot"],
  },
  "include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"]
}

npm install uview-plus
npm install dayjs
npm install clipboard

// Install sass
npm install sass -D 
// Install sass-loader, note that version 10 is required; otherwise, it may cause compatibility issues between vue and sass and throw errors
npm install sass-loader@10 -D

// main.ts
import uviewPlus from 'uview-plus'
import App from './App.vue'
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app
  }
}
// #endif

/* uni.scss */
@import 'uview-plus/theme.scss';

// App.vue
<style lang="scss">
	/* Note to write in the first line and add lang="scss" attribute to the style tag */
	@import "uview-plus/index.scss";
</style>

// pages.json
{
	"easycom": {
		// Note that it must be placed in custom; otherwise, it will be invalid, https://ask.dcloud.net.cn/question/131175
		"custom": {
			"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
	        "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
		}
	},
	
	// This is the existing content
	"pages": [
		// ......
	]
}

declare module "uview-plus"

<u-button text="Submit"></u-button>

pnpm add [email protected]

//main.ts
 
import { createSSRApp } from 'vue';
import * as Pinia from 'pinia';
 
export function createApp() {
	const app = createSSRApp(App);
	app.use(Pinia.createPinia());
	return {
		app,
		Pinia, // Pinia must be returned here
	};
}

// stores/counter.js
import { defineStore } from 'pinia';
 
export const useCounterStore = defineStore('counter', {
	state: () => {
		return { count: 0 };
	},
	// You can also define it this way
	// state: () => ({ count: 0 })
	actions: {
		increment() {
			this.count++;
		},
	},
});

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
counter.count++
// Auto-completion! ✨
counter.$patch({ count: counter.count + 1 })
// Or use action instead
counter.increment()
</script>
<template>
  <!-- Directly access state from store -->
  <div>Current Count: {{ counter.count }}</div>
</template>

pnpm i pinia-plugin-persistedstate

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

import { defineStore } from 'pinia'
 
export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('Hello pinia')
    return { someState }
  },
  {
    persist: true,
  },
)

export const useMemberStore = defineStore(
  'main',
  () => {
    //…omitted
  },
  {
    // Configure persistence
    persist: {
      // Adjust to be compatible with multi-end APIs
      storage: {
        setItem(key, value) {
          uni.setStorageSync(key, value) 
        },
        getItem(key) {
          return uni.getStorageSync(key) 
        },
      },
    },
  },
)

// src/utils/http.ts
 
// Base request address
const baseURL = 'xxxx'
 
// Interceptor configuration
const httpInterceptor = {
  // Triggered before interception
  invoke(options: UniApp.RequestOptions) {
    // 1. If not starting with http, concatenate the address
    if (!options.url.startsWith('http')) {
      options.url = baseURL + options.url
    }
    // 2. Request timeout
    options.timeout = 10000
    // 3. Add mini-program request header identifier
    options.header = {
      'source-client': 'miniapp',
      ...options.header,
    }
    // 4. Add token request header identifier
    const memberStore = useMemberStore()
    const token = memberStore.profile?.token
    if (token) {
      options.header.Authorization = token
    }
  },
}
 
// Intercept request requests
uni.addInterceptor('request', httpInterceptor)
// Intercept uploadFile file uploads
uni.addInterceptor('uploadFile', httpInterceptor)

/**
 * Request function
 * @param  UniApp.RequestOptions
 * @returns Promise
 *  1. Returns a Promise object for handling return value types
 *  2. Successfully obtaining data
 *    2.1 Extract core data res.data
 *    2.2 Add types, supporting generics
 *  3. Failed to obtain data
 *    3.1 401 error  -> Clear user information and redirect to login page
 *    3.2 Other errors -> Provide light prompts based on backend error information
 *    3.3 Network errors -> Prompt users to change networks
 */
type Data<T> = {
  code: string
  msg: string
  result: T
}
// 2.2 Add types, supporting generics
export const http = <T>(options: UniApp.RequestOptions) => {
  // 1. Return Promise object
  return new Promise<Data<T>>((resolve, reject) => {
    uni.request({
      ...options,
      // Response success
      success(res) {
        // Status code 2xx, refer to axios design
        if (res.statusCode >= 200 && res.statusCode < 300) {
          // 2.1 Extract core data res.data
          resolve(res.data as Data<T>)
        } else if (res.statusCode === 401) {
          // 401 error  -> Clear user information and redirect to login page
          const memberStore = useMemberStore()
          memberStore.clearProfile()
          uni.navigateTo({ url: '/pages/login/login' })
          reject(res)
        } else {
          // Other errors -> Provide light prompts based on backend error information
          uni.showToast({
            icon: 'none',
            title: (res.data as Data<T>).msg || 'Request error',
          })
          reject(res)
        }
      },
      // Response failure
      fail(err) {
        uni.showToast({
          icon: 'none',
          title: 'Network error, try changing the network',
        })
        reject(err)
      },
    })
  })
}

npm i unplugin-auto-import -save

//vite.config.ts
 
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
 
// https://vitejs.dev/config/
export default defineConfig({
  build: {
    sourcemap: process.env.NODE_ENV === 'development',
  },
  plugins: [
    uni(),
    AutoImport({ // Use
      imports: ['vue'],
      dts: 'src/auto-import.d.ts',
      // If using eslint, remember to add this; if not, it can be ignored
      eslintrc: {
        enabled: true,
      },
    })
  ],
})

//.eslintrc.js
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier',
    'plugin:prettier/recommended', // Add prettier plugin,
  ],

npm install miniprogram-api-typings --save-dev