uniapp +vue3 开发需要兼容小程序、h5、安卓、ios, 选择哪些插件和ui库会更合适，完整框架搭建和详细代码

以下是基于 UniApp + Vue 3 开发，兼容小程序、H5、安卓和 iOS 的完整框架搭建方案，包括推荐的 UI 库和插件，以及详细代码示例。

一、框架搭建

1. 环境准备

确保已安装 Node.js 和 npm/yarn。推荐使用最新稳定版本的 Node.js。

2. 创建项目

使用 HBuilderX 创建项目，或者通过命令行创建：

npx create-uni-app my-app
cd my-app

3. 安装依赖

安装 Vue 3 和其他必要的依赖：

npm install

二、推荐的 UI 库和插件

1. UI 库

推荐使用 uView Plus，这是一个专为 UniApp 生态设计的 UI 框架，支持 Vue 3，适配 H5、小程序、安卓和 iOS。

安装 uView Plus：

pnpm add uview-plus  # 或 npm install uview-plus

配置项目：
在 src/main.ts 中引入并挂载 uView：

import { createSSRApp } from 'vue';
import App from './App.vue';
import uViewPlus from 'uview-plus';

export function createApp() {
  const app = createSSRApp(App);
  app.use(uViewPlus);
  return { app };
}

在 src/uni.scss 中引入全局样式：

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

在 App.vue 中引入基础样式：

<style lang="scss">
@import "uview-plus/index.scss";
</style>

在 pages.json 中配置自动导入组件：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue",
      "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue"
    }
  }
}

2. 状态管理

推荐使用 Pinia，它是 Vue 3 的官方状态管理库。

安装 Pinia：

npm install pinia

配置 Pinia：
在 src/main.ts 中引入并挂载 Pinia：

import { createPinia } from 'pinia';
const pinia = createPinia();
app.use(pinia);

3. HTTP 请求

推荐使用 Axios，并结合 axios-miniprogram-adapter 适配小程序。

安装 Axios：

npm install axios axios-miniprogram-adapter

配置 Axios：
在 src/utils/request.js 中配置 Axios：

import axios from 'axios';
import axiosMiniprogramAdapter from 'axios-miniprogram-adapter';

axios.defaults.adapter = axiosMiniprogramAdapter;

export default axios;

4. 其他插件

• mescroll-uni：用于实现下拉刷新和上拉加载。

  npm install mescroll-uni
  

• uCharts：高性能跨平台图表库。

  npm install ucharts
  

三、项目结构

my-app/
├── src/
│   ├── main.ts
│   ├── App.vue
│   ├── uni.scss
│   ├── utils/
│   │   └── request.js
│   ├── stores/
│   │   └── useUserStore.ts
│   ├── pages/
│   │   └── index.vue
│   └── components/
│       └── CustomComponent.vue
├── pages.json
├── manifest.json
└── package.json

四、示例代码

1. 页面示例

src/pages/index.vue：

<template>
  <view>
    <u-button type="primary" @click="fetchData">获取数据</u-button>
    <view v-if="data">数据：{{ data }}</view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from '@/utils/request';

export default defineComponent({
  setup() {
    const data = ref(null);

    const fetchData = async () => {
      try {
        const response = await axios.get('/api/data');
        data.value = response.data;
      } catch (error) {
        console.error(error);
      }
    };

    return {
      data,
      fetchData,
    };
  },
});
</script>

2. Pinia Store 示例

src/stores/useUserStore.ts：

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    age: 0,
  }),
  actions: {
    setName(name: string) {
      this.name = name;
    },
    setAge(age: number) {
      this.age = age;
    },
  },
});

3. Axios 请求示例

src/utils/request.js：

import axios from 'axios';
import axiosMiniprogramAdapter from 'axios-miniprogram-adapter';

axios.defaults.adapter = axiosMiniprogramAdapter;

export default axios;

五、多端适配

1. 小程序适配

在 manifest.json 中配置小程序相关设置：

{
  "mp-weixin": {
    "appid": "your-appid",
    "pages": [
      {
        "path": "pages/index/index",
        "style": {
          "navigationBarTitleText": "首页"
        }
      }
    ]
  }
}

2. H5 适配

在 manifest.json 中配置 H5 相关设置：

{
  "h5": {
    "devServer": {
      "proxy": {
        "/api": {
          "target": "http://your-api-server.com",
          "changeOrigin": true
        }
      }
    }
  }
}

六、运行与调试

1. 小程序调试

npm run dev:mp-weixin

2. H5 调试

npm run dev:h5

3. App 调试

使用 HBuilderX 或其他工具打包为 App 进行调试。

七、总结

通过上述步骤，你可以搭建一个基于 UniApp + Vue 3 的完整开发框架，支持小程序、H5、安卓和 iOS。推荐的 UI 库和插件包括 uView Plus、Pinia、Axios 等，能够满足多端开发的需求。

如果需要更详细的代码示例和配置，可以参考开源项目 uniapp-vue3-template 。