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

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

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

 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",
    "typecheck": "vue-tsc --noEmit --skipLibCheck",
    "lint": "eslint . --fix",
    "format": "prettier . --write !**/*.{js,jsx,mjs,cjs,json,ts,tsx,mts,cts,vue,svelte,astro} !*.min.* !CHANGELOG.md !dist !LICENSE* !output !coverage !public !temp !package-lock.json !pnpm-lock.yaml !yarn.lock !__snapshots__",
    "commit": "git pull && pnpm format && pnpm lint && git add -A && pnpm cz && git push",
    "pre-commit": "git pull && pnpm lint-staged && pnpm cz && git push",
    "cz": "czg",
    "prepare": "husky install"
  },
  "dependencies": {
    "@babel/runtime": "^7.22.6",
    "@nutui/nutui-taro": "^4.0.12",
    "@tarojs/cli": "3.6.8",
    "@tarojs/components": "3.6.8",
    "@tarojs/helper": "3.6.8",
    "@tarojs/plugin-html": "3.6.8",
    "@tarojs/plugin-platform-alipay": "3.6.8",
    "@tarojs/plugin-platform-h5": "3.6.8",
    "@tarojs/plugin-platform-jd": "3.6.8",
    "@tarojs/plugin-platform-qq": "3.6.8",
    "@tarojs/plugin-platform-swan": "3.6.8",
    "@tarojs/plugin-platform-tt": "3.6.8",
    "@tarojs/plugin-platform-weapp": "3.6.8",
    "@tarojs/runtime": "3.6.8",
    "@tarojs/shared": "3.6.8",
    "@tarojs/taro": "3.6.8",
    "@tarojs/webpack5-runner": "3.6.8",
    "@vueuse/core": "^10.2.1",
    "lodash-es": "^4.17.21",
    "pinia": "^2.1.4",
    "qs": "^6.11.2",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@babel/core": "^7.22.9",
    "@babel/preset-env": "^7.22.9",
    "@iconify/json": "^2.2.88",
    "@iconify/utils": "^2.1.7",
    "@tarojs/plugin-framework-vue3": "3.6.8",
    "@types/lodash-es": "^4.17.7",
    "@types/node": "^20.4.1",
    "@types/qs": "^6.9.7",
    "@types/webpack-env": "^1.18.1",
    "@unocss/webpack": "^0.53.5",
    "@vue/babel-plugin-jsx": "^1.1.5",
    "babel-loader": "^9.1.3",
    "babel-preset-taro": "3.6.8",
    "commitlint": "^17.6.6",
    "czg": "^1.7.0",
    "eslint": "^8.44.0",
    "eslint-config-soybeanjs": "^0.5.1",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.3",
    "taro-plugin-pinia": "^1.0.0",
    "typescript": "5.1.6",
    "unocss": "^0.53.5",
    "unocss-preset-weapp": "^0.53.5",
    "unplugin-vue-components": "^0.25.1",
    "vue-loader": "^17.2.2",
    "vue-tsc": "^1.8.4",
    "webpack": "^5.88.2"
  },
  "lint-staged": {
    "*.{js,mjs,jsx,ts,mts,tsx,json,vue,svelte,astro}": "eslint . --fix",
    "*.!{js,mjs,jsx,ts,mts,tsx,json,vue,svelte,astro}": "format"
  }
}

然后打开终端输入 npm i 如果报错有可能是你的node版本过高，可以输入 npm i --legacy-peer-deps

打开babel.config.js

module.exports = {
  presets: [
    [
      'taro',
      {
        framework: 'vue3',
        ts: true
      }
    ]
  ],
  plugins: []
};

打开.eslintrc.js配置代码规范

module.exports = {
  extends: ['soybeanjs/vue'],
  overrides: [
    {
      files: ['*.vue'],
      rules: {
        'no-undef': 'off' // use tsc to check the ts code of the vue
      }
    }
  ],
  settings: {
    'import/core-modules': ['uno.css', '~icons/*', 'virtual:svg-icons-register']
  },
  rules: {
    'no-return-await': 'off',
    'import/order': [
      'error',
      {
        'newlines-between': 'never',
        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
        pathGroups: [
          {
            pattern: 'vue',
            group: 'external',
            position: 'before'
          },
          {
            pattern: '@tarojs/taro',
            group: 'external',
            position: 'before'
          },
          {
            pattern: 'pinia',
            group: 'external',
            position: 'before'
          },
          {
            pattern: '@nutui/nutui-taro',
            group: 'external',
            position: 'before'
          },
          {
            pattern: '@/constants',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/config',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/settings',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/enum',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/plugins',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/pages',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/views',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/components',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/package',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/service',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/store',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/context',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/composables',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/hooks',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/utils',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/assets',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/**',
            group: 'internal',
            position: 'before'
          }
        ],
        pathGroupsExcludedImportTypes: ['vue', 'vue-router', 'pinia', '@nutui/nutui-taro']
      }
    ]
  }
};