devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3+ts项目推荐（企业级0到1开发）H5

作者：我家自动化 | 2024-03-27 00:41:02

赞

踩

vue3+ts项目

一、技术方案

  1. 基于 vue3+typescript 中大型项目开发解决方案
  2. 基于 vant 组件库快速构建H5界面解决方案
  3. 基于 vue-router 的前端路由解决方案
  4. 基于 vite 的 create-vue 构建vue3项目解决方案
  5. 基于 pinia 的状态管理解决方案
  6. 基于 pinia-plugin-persistedstate 状态持久化解决方案
  7. 基于 @vuecore/use 的组合式API工具库解决方案
  8. 身份证信息校验解决方案
  9. 基于 postcss-px-to-viewport 移动端适配解决方案
  10. 基于 vite-plugin-svg-icons 的svg图标组件解决方案
  11. 基于 vite-plugin-html 自定义html模板解决方案
  12. 基于 unplugin-vue-components 组件自动注册解决方案
  13. 基于 socket.io 的即时通讯问诊室解决方案
  14. 第三方登录解决方案
  15. 第三方支付解决方案
  16. 第三方地图解决方案
  17. pnpm 包管理方案
  18. css 变量主题定制方案
  19. 自定义 hook 解决方案
  20. axios 二次封装解决方案
  21. services API接口分层解决方案
  22. 基于 vant 的通用组件封装解决方案
  23. mock 本地数据模拟解决方案
  24. 基于 eruda 的移动端调试解决方案
  25. 生产环境配置方案
  26. CI/CD 持续集成自动部署方案 

二、业务涵盖

  1. 医生与文章推荐业务
  2. 快速问诊业务
  3. 问诊费用支付宝支付业务
  4. 问诊室业务
  5. 药品订单支付宝支付业务
  6. 实时物流高德地图业务
  7. QQ登录业务

三、 项目搭建

1.创建项目

  1. pnpm create vue
  2. # or
  3. npm init vue@latest
  4. # or
  5. yarn create vue

2.选择项目依赖

  1. ✔ Project name: … patients-h5-100
  2. ✔ Add TypeScript? … No / `Yes`
  3. ✔ Add JSX Support? … `No` / Yes
  4. ✔ Add Vue Router for Single Page Application development? … No / `Yes`
  5. ✔ Add Pinia for state management? … No / `Yes`
  6. ✔ Add Vitest for Unit Testing? … `No` / Yes
  7. ✔ Add Cypress for both Unit and End-to-End testing? … `No` / Yes
  8. ✔ Add ESLint for code quality? … No / `Yes`
  9. ✔ Add Prettier for code formatting? … No / `Yes`
  10.  
  11. Scaffolding project in /Users/zhousg/Desktop/patient-h5-100...
  12.  
  13. Done. Now run:
  14.  
  15.   cd patient-h5-100
  16.   pnpm install
  17.   pnpm lint
  18.   pnpm dev

3.插件推荐

必装：

  • Vue Language Features (Volar) vue3语法支持
  • TypeScript Vue Plugin (Volar) vue3中更好的ts提示
  • Eslint 代码风格校验

注意

  • vscode 安装了 Prettier 插件的可以先 禁用，或者关闭保存自动格式化功能，避免和项目的 Eslint 风格冲突。

可选：

  • gitLens 代码git提交记录提示
  • json2ts json自动转ts类型
  • Error Lens 行内错误提示

提示：

  • 大中型项目建议开启 TS托管模式 , 更好更快的类型提示。

4.eslint 预制配置

  1.   rules: {
  2.     'prettier/prettier': [
  3.       'warn',
  4.       {
  5.         singleQuote: true,
  6.         semi: false,
  7.         printWidth: 80,
  8.         trailingComma: 'none',
  9.         endOfLine: 'auto'
  10.       }
  11.     ],
  12.     'vue/multi-word-component-names': [
  13.       'warn',
  14.       {
  15.         ignores: ['index']
  16.       }
  17.     ],
  18.     'vue/no-setup-props-destructure': ['off'],
  19.     // 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/320700
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。