工程目录

合理的目录结构首先应该是清晰的，让开发人员一眼看上去就能大概了解各个目录的内容，这样也容易应对新的变化。尤其是随着代码量的上升，整体目录结构的划分就越发重要，做到以下两点即可：

• 功能、业务分离。将业务模块与功能模块分离可以减少代码耦合，增强代码复用。
• 数据逻辑层与视图层分离。数据逻辑与UI分离，同时设定清晰的接口能够提高业务开发与画面开发人员效率，提高测试效率，便于问题排查，同时代码结构清晰。

---

目录结构

|-src

|--api

|--assets

|--components

|--router

|--store

|--styles

|---reset.css

|---theme.css

|--utils

|---request.js

|--views

|--App.vue

|--main.js

|--.env.development

|--.env.production

|--.gitignore

|--.babel.config.js

|--package-lock.json

|--package.json

|--README.md

|--vue.config.js

注：目录划分不是绝对的，也没有真正的好坏之分，具体还是按照业务需求、功能需求寻求一种最合适的结构，只要适用于自己的业务，就是好的目录结构。

划分说明

• src：项目根目录。
• api：与后台交互的方法与配置目录。
• assets：静态资源目录，如图片、图标、字体等。
• components：公用组件目录。
• router：Vue-router相关配置目录。
• store：Vuex相关配置目录。
• styles：样式目录，包含清空浏览器自带样式的reset.css与全局主题样式文件theme.css等。
• utils：工具目录，包含请求拦截器文件request.js等。
• views：视图目录。
• App.vue：项目的顶层视图文件。
• main.js：项目的入口。
• .env.development：开发环境的环境变量配置文件。
• .env.production：生产环境的环境变量配置文件。
• .gitignore：git仓库相关配置文件。
• .babel.config.js：babel编译相关配置文件。
• .vue.config.js：vue全局配置文件。