vue真实项目结构
我明白你的需求。如果你想看一个真实企业项目使用的复杂目录结构,你可以参考以下几个例子:
|- src
| |- api 存放所有请求接口
| |- assets 存放静态资源,如图片、字体等
| |- components 存放可复用的组件
| |- config 存放一些配置文件,如路由、全局变量等
| |- directive 存放自定义指令
| |- filter 存放过滤器
| |- mixin 存放混入对象
| |- mock 存放模拟数据
| |- pages 存放页面级别的组件,按照路由模块来划分
| |- plugins 存放插件,如element-ui、axios等
| |- router 存放路由配置文件
| |- store 存放状态管理文件,如vuex等
| |- utils 存放通用的工具函数或配置文件
|- src
| - modules
| - home 首页模块
| - components 首页相关组件
| - views 首页相关视图
| - router.js 首页相关路由
| - store.js 首页相关状态管理
| - user 用户模块
| - components 用户相关组件
| - views 用户相关视图
| - router.js 用户相关路由
| - store.js 用户相关状态管理
| - common 公共资源目录
| - assets 公共静态资源
| - components 公共组件
| - utils 公共工具函数
| - App.vue 根组件
| - main.js 入口文件
|- src 开发目录
|-- api 接口请求封装(axios)
|-- assets 资源文件(图片、样式)
|-- components 组件(公共/业务)
|-- config 配置项(全局变量/常量)
|-- directive 自定义指令(v-copy/v-debounce/v-lazyload...)
|-- filters 过滤器(dateFormat/currencyFormat...)
|-- layout 布局组件(header/footer/siderbar...)
|-- mixins 混入对象(authMixin/listMixin...)
|-- mock 模拟数据(mockjs)
|-- plugins 插件注册(element-ui/axios/vue-lazyload...)
|-- router 路由配置 (index.js/map.js/guard.js...)
|-- store 状态管理 (index.js/modules/user.js/modules/cart.js...)
|-- utils 工具函数 (request/storage/event-bus/validator...)
这些只是一些示例,你可以根据自己的项目需求和喜好来调整目录结构。希望这能对你有所帮助。