web大型工程项目架构以及搭建

一、项目结构

复制代码
├── public/
├── config/
│   └── proxy.js                            # 本地代理配置
├── src/
│   ├── assets/
│   ├── components/
│   ├── configs/
│   │   ├── index.js                        # 应用配置
│   │   ├── routes.js                       # 路由文件
│   │   └── sidebar.js
│   ├── services/
│   │   ├── api/                            # 数据请求
│   │   └── index.js
│   ├── shared/
│   │   ├── utils/                          # 公共函数
│   │   └── index.js
│   ├── theme/
│   │   └── layouts/Layout.vue              # 默认布局  
│   ├── views/                              # 前端页面
│   ├── store/                              # 状态管理
│   ├── App.vue
│   ├── entry-spa.js                        # 独立应用入口
│   ├── entry-stark.js                      # 微应用入口  
│   └── main.js                             # 总入口
├── vue.config.js                           # vue打包,热更新配置文件
└── package.json                            # 依赖版本以及启动命令x项目

二、项目思路

1.构建基本项目 vue2.0/vue3.0

2.根据后台接口路径新建接口路径配置文件(大型项目接口路径有多个,需要分别处理)

3.mock数据,根据环境变量判断是开发环境,本地调试免登录可以mock用户数据,token写死

4.文件夹嵌套规则:view放页面,components放各类组件,service放各模块接口js,api放公共接口js,system放封装的各类工具js和axios请求js,

5.模块内复用组件就放在对应view页面文件夹中,单独新建components文件放置,而公共复用组件放在src下的components文件夹

6.shared文件夹主要放置公共处理函数js,比如,时间格式处理,字符串处理

相关推荐
crary,记忆几秒前
Angular如何让整个项目的所有页面能够整体缩小一定的比例?
javascript·ecmascript·angular.js
一嘴一个橘子8 分钟前
vue.js 视频截取为 gif - 2(将截取到的gif 转换为base64 、file)
vue.js
Mintopia15 分钟前
🤖 算法偏见修正:WebAI模型的公平性优化技术
前端·javascript·aigc
Mintopia18 分钟前
🧩 TypeScript防御性编程:让Bug无处遁形的艺术
前端·typescript·函数式编程
JarvanMo20 分钟前
🔔 Flutter 本地通知: 吸引用户的完整指南—即使在他们离线时也能实现
前端
你想考研啊25 分钟前
一、redis安装(单机)和使用
前端·数据库·redis
江城开朗的豌豆27 分钟前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
天蓝色的鱼鱼27 分钟前
React 19 发布一年后:对比 React 18,带来了哪些惊喜与变革
前端·react.js
你的电影很有趣32 分钟前
lesson73:Vue渐进式框架的进化之路——组合式API、选项式对比与响应式新范式
javascript·vue.js
江城开朗的豌豆32 分钟前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序