%20(2).svg)
项目简介
本项目是基于Taro 3框架与Vue 3技术栈开发的微信小程序。Taro作为跨多端开发框架，可实现一次开发多端部署，本项目聚焦微信小程序，结合Vue 3的组件化与响应式开发优势，使用TypeScript保障代码质量，旨在打造功能丰富、体验良好的小程序应用。
项目的主要特性和功能
- 开发环境：运用Taro 3.4.7、Vue 3、TypeScript 4.1.0与Pinia 2.0.6进行开发，依赖Node 16.14.0环境。
- 组件库：引入NutUI组件库，具备按需加载与定制主题色功能，简化UI开发。
- 小程序分包：对小程序进行分包配置，实现按需加载，避免主包大小限制，提升加载速度。
- 代码规范：借助Eslint、Prettier、Husky、Lint - Staged与CommitLint，实现代码规范检查、自动格式化以及git commit的规范管理。
- 日志生成：可根据commit记录生成changelog，方便版本管理。
- 调试工具：配置Vue DevTools，提升开发调试体验。
- 请求封装：对request进行封装，处理h5跨域问题，统一api调用方式。
- 全局样式：进行全局样式配置，保证应用样式一致性。
安装使用步骤
安装依赖
- 复制项目并安装依赖，运行开发脚本：
shell git clone http://xxxx npm install npm install @nutui/nutui-taro @tarojs/plugin-html -S npm install @vue/eslint-config-prettier @vue/eslint-config-typescript eslint-plugin-prettier -D npm install husky -D npm install lint-staged -D npm install --save-dev @commitlint/{config-conventional,cli} npm install conventional-changelog-cli -D npm install @tarojs/plugin-vue-devtools -D - 若使用
git cz：shell npm install commitizen -g commitizen init cz-conventional-changelog --save --save-exact npm install cz-customizable -D npm install commitlint-config-cz -D
配置文件
- 项目根目录配置
.eslintrc.js、.prettierrc.js、commitlint.config.js。 - 配置
tsconfig.json：json { "compilerOptions": { "paths": { "@/*": [ "src/*" ] } } } - 配置
config/dev.js： ```javascript const args = process.argv; const isOpenDevTools = args.includes('--devtools'); const isH5 = process.env.TARO_ENV === 'h5'; const HOST = '"https://blm-mrb.dev.bzlrobot-ift.com"';
module.exports = {
env: {
NODE_ENV: '"development"'
},
defineConstants: {
HOST: isH5? '""' : HOST
},
mini: {},
h5: {
devServer: {
proxy: {
'/api': {
target: 'https://blm-mrb.dev.bzlrobot-ift.com',
changeOrigin: true,
secure: false
}
}
}
},
plugins: isOpenDevTools? ['@tarojs/plugin-vue-devtools'] : []
};
4. 在`package.json`中添加脚本：json
{
"scripts": {
"tsc": "vue-tsc --noEmit --skipLibCheck",
"lint": "eslint --ext.vue --ext.js --ext.ts src/",
"dev:weapp": "your command",
"devtools:weapp": "npm run build:weapp -- --watch --devtools",
"changelog": "npx conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
"push": "git add. && cz && git push"
},
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
}
}
5. 配置`.lintstatedrc.js`：javascript
module.exports = {
'src//*.{js,jsx,vue,ts,tsx}': ['npm run lint'],
'src//*.{vue,ts}': ['npm run tsc']
};
```
运行项目
- 运行开发脚本：
shell npm run dev:weapp - 打开微信开发工具，将项目目录指向
dist目录，填写自己的AppId。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】