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,比如,时间格式处理,字符串处理

相关推荐
爱编程的喵5 分钟前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
代码的余温13 分钟前
CSS3文本阴影特效全攻略
前端·css·css3
AlenLi23 分钟前
JavaScript - 策略模式在开发中的应用
前端
xptwop25 分钟前
05-ES6
前端·javascript·es6
每天开心26 分钟前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
wxjlkh29 分钟前
powershell 批量测试ip 端口 脚本
java·服务器·前端
海底火旺29 分钟前
单页应用路由:从 Hash 到懒加载
前端·react.js·性能优化
每天开心29 分钟前
噜噜旅游App(3)——打造个性化用户中心:AI生成头像与交互设计
前端·前端框架
Heo30 分钟前
调用通义千问大模型实现流式对话
前端·javascript·后端
绅士玖32 分钟前
移动端自适应方案:lib-flexible + postcss-pxtorem 实践指南
前端