上一篇我们初始化了小程序项目，这一篇我们来整理一下框架
首先可以看到我的项目整理框架是这样的：
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文章来源：https://www.toymoban.com/news/detail-601220.html
module.exports = {
presets: [
[
'taro',
{
framework: 'vue3',
ts: true
}
]
],
plugins: []
};
打开.eslintrc.js配置代码规范文章来源地址https://www.toymoban.com/news/detail-601220.html
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']
}
]
}
};
到了这里，关于vue3+taro+Nutui 开发小程序（二）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
