vue3+taro+Nutui 开发小程序（二）

最新推荐文章于 2026-05-07 08:39:32 发布

原创

最新推荐文章于 2026-05-07 08:39:32 发布 · 2.2k 阅读

标签

#taro #小程序

该文章介绍了如何初始化并整理一个基于Taro的小程序项目框架，包括组件、自定义tabbar、接口、页面、HTTP请求封装、接口存储、状态管理以及项目配置等。作者提供了详细的文件结构，并展示了page.json、babel.config.js和.eslintrc.js的配置内容，同时提到了可能遇到的问题及解决方法，如使用npm安装时可能出现的版本问题。

上一篇我们初始化了小程序项目，这一篇我们来整理一下框架

首先可以看到我的项目整理框架是这样的：

components:这里存放封装的组件

custom-tab-bar:这里存放自己封装的自定义tabbar

interface：这里放置了Ts的一些基本泛型，不用Ts的可以忽略

pages：这里放置了小程序的所有页面

service：这里二次封装了小程序的http请求

api：这里存放用到的接口

store：这里存放pinia仓库类似于vuex@5

app.Ts 这里是小程序的入口文件

app.config.Ts 这里是小程序基本根目录下的一些配置

这就是基本的框架结构，我们一步一步来完善，首先我们找打page.json

{
  "name": "taro3-vue3-pinia",
  "version": "1.0.0",
  "private": true,
  "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 --env production",
    "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

最低0.47元/天解锁文章