uni-app+ts+vue3 的基本使用 、Pinia等，以及获取组件实例内部的方法使用

下面是一篇概述性质的文章，旨在引导您开始使用 Uni-App 框架结合 TypeScript 和 Vue 3 进行跨平台应用开发。请注意，这只是一个示例性内容，并非直接来源于网络上的具体文章，但会涵盖基本的设置和使用方法。

随着前端技术的飞速发展，Uni-App 作为一款强大的跨平台开发框架，凭借其基于 Vue.js 的便捷性和跨平台能力，成为了许多开发者的选择。本文将指导你如何从零开始，利用 Uni-App 结合 TypeScript 和 Vue 3 版本，搭建一个基本的项目结构，并介绍一些核心概念和开发流程。

一、环境准备

1. 安装 Node.js: 确保你的开发环境已安装 Node.js，因为 Uni-App 依赖于 npm 或 yarn 进行包管理。

2. 安装 HBuilderX: HBuilderX 是 DCloud 官方推荐的开发工具，它内置了对 Uni-App 的良好支持，包括代码提示、编译、预览等功能。

3. 创建项目: 打开 HBuilderX，选择“文件”>“新建”>“项目”，在模板中选择“uni-app”，并勾选“使用Vue 3”和“TypeScript”。

二、项目结构简介

创建完项目后，你会看到如下的目录结构：

• pages: 存放页面组件的目录。
• static: 静态资源文件存放位置。
• unpackage: 编译输出目录。
• manifest.json: 应用配置文件。
• main.ts: 应用的入口文件，使用 TypeScript 编写。
• App.vue: 应用的基础模板。

三、Hello World 示例

1. 创建页面: 在 pages 目录下新建一个名为 hello 的目录，并在其中创建 hello.vue 文件。

2. 编写页面组件 (hello.vue)：

<template>
  <view class="container">
    <text>Hello, {{ message }}</text>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('World from Vue 3 + TypeScript');
    return { message };
  }
});
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

3、在 App.vue 中引入新页面：

<template>
  <view class="app">
    <navigator url="/pages/hello/hello" />
  </view>
</template>

四、编译与预览

• 使用 HBuilderX 的菜单或快捷键进行编译，选择你想要运行的平台（如微信小程序、H5等）。
• 通过 HBuilderX 内置的模拟器或真实设备预览应用。

五、TypeScript 配置

确保 .tsconfig.json 文件正确配置以支持 Vue 3 和 Uni-App。通常，创建项目时会自动生成基础配置，但根据需要，你可能要调整编译选项，例如：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["@dcloudio/types"],
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": [
      "esnext",
      "dom",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

六、进阶

• 状态管理: 可以使用 Pinia 或 Vuex 4 进行状态管理，尤其是在复杂应用中。
• 路由管理: Uni-App 提供了自己的页面路由机制，也可以通过第三方库如 uni-simple-router 进行更灵活的路由控制。
• UI库: 推荐使用 uView UI 或 Vant Weapp 等成熟的 UI 组件库来快速搭建界面。

这里主要介绍Pina的适用：

Pinia作为Vue 3生态中的新一代状态管理库，以其简洁的API设计、优秀的TypeScript支持以及与Vue Composition API的完美融合而受到广泛欢迎。本文将引导您完成从安装到实践Pinia的全过程，让您能够高效地在Vue 3项目中管理状态。

一、Pinia安装

在项目根目录下，使用npm或yarn安装Pinia：

npm install pinia
# 或者
yarn add pinia

二、创建Pinia实例

在您的Vue应用的入口文件（通常是main.js或main.ts）中，导入createPinia函数并将其添加到应用实例中：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

三、定义Store

1. 创建Store文件：在项目的src/stores目录下创建一个新文件，例如counter.ts。

2. 编写Store逻辑：

// counter.ts
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 };
  },
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

四、在组件中使用Store

在任何Vue组件中，您可以轻松地导入并使用刚才创建的store：

<template>
  <div>
    <button @click="increment">+</button>
    <span>{{ count }}</span>
    <button @click="decrement">-</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter';

const counter = useCounterStore();
</script>

五、响应式状态

Pinia自动使store中的状态变为响应式的，这意味着当状态变化时，依赖这些状态的组件会自动更新。

六、模块化与命名空间

尽管Pinia没有传统意义上的命名空间，但它鼓励使用模块化的方式来组织store。每个store都是独立的，可以通过唯一的名称来区分和访问。

七、插件与高级特性

Pinia支持插件扩展，比如使用pinia-plugin-persistedstate来实现状态持久化：

npm install pinia-plugin-persistedstate

然后，在创建Pinia实例时应用插件：

import { createPinia } from 'pinia';
import persistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(persistedstate);

总结：

Pinia以其现代化的设计和Vue 3的深度整合，简化了状态管理的复杂度，提高了开发效率。通过本文的介绍，您应该能够快速开始在自己的Vue 3项目中使用Pinia进行状态管理。随着实践的深入，探索Pinia的更多高级特性和最佳实践，将使您的应用状态管理更加得心应手。

获取组件内部暴露出的方法

1、首先在 新建一个组件大概的一个大概结构

2、在组件中定义了两个方法 ，并且向外暴露

3、使用通过ref获取

4、利用关键字 InstanceType  推导出  所暴露的方法