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']}]}
};