论文网站建设,临县网站建设,网站建设调研报告,网站的设计 改版 更新上一篇我们初始化了小程序项目#xff0c;这一篇我们来整理一下框架
首先可以看到我的项目整理框架是这样的#xff1a; components:这里存放封装的组件
custom-tab-bar:这里存放自己封装的自定义tabbar
interface#xff1a;这里放置了Ts的一些基本泛型#xff0c;不用…上一篇我们初始化了小程序项目这一篇我们来整理一下框架
首先可以看到我的项目整理框架是这样的 components:这里存放封装的组件
custom-tab-bar:这里存放自己封装的自定义tabbar
interface这里放置了Ts的一些基本泛型不用Ts的可以忽略
pages这里放置了小程序的所有页面
service这里二次封装了小程序的http请求
api这里存放用到的接口
store这里存放pinia仓库类似于vuex5
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]}]}
};
