Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[vue] 说下你的vue项目的目录结构,如果是大型项目你该怎么划分结构和划分组件呢? #339

Open
haizhilin2013 opened this issue Jun 20, 2019 · 2 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] 说下你的vue项目的目录结构,如果是大型项目你该怎么划分结构和划分组件呢?

@haizhilin2013 haizhilin2013 added the vue vue label Jun 20, 2019
@guxinduyin666
Copy link

views目录存放一级路由的组件,即视图组件
Components目录存放组件
Store存放vuex相关文件
Router目录存放路由相关文件
Untils目录存放工具js文件
API目录存放封装好的与后端交互的逻辑
Assets存放静态文件

@Cai-zhiji
Copy link

目录结构

├── public
│   ├── index.html
│   └── ...
├── src
│   ├── assets
│   ├── components
│   ├── views
│   ├── router
│   ├── store
│   ├── services
│   ├── utils
│   └── App.vue
├── tests
├── .eslintrc.js
├── babel.config.js
├── package.json
└── ...

public: 存放静态资源和入口HTML文件。
src: 存放源代码。
assets: 存放静态资源如图片、字体等。
components: 存放可复用的Vue组件。
views: 存放页面级别的Vue组件。
router: 存放Vue Router的路由配置文件。
store: 存放Vuex的状态管理文件。
services: 存放与后端API通信的服务文件。
utils: 存放工具函数和辅助方法。
App.vue: 项目的根组件。
tests: 存放测试文件和测试配置。
.eslintrc.js: ESLint的配置文件。
babel.config.js: Babel的配置文件。
package.json: 项目的依赖和脚本配置文件。

对于大型项目的结构和组件划分,可以根据项目的规模和需求进行更详细的划分。常见的做法是按照功能或模块来划分文件夹和组件,以提高代码的可维护性和团队的协作效率。

例如,可以将页面级别的组件按照模块划分到不同的文件夹中,每个文件夹包含该模块相关的组件、样式和逻辑代码。在组件内部,可以进一步划分子组件和组件相关的样式、逻辑等。

除了功能模块的划分,还可以根据业务逻辑和组件复用性来划分组件。例如,将一些通用的UI组件封装为可复用的组件库,供整个项目使用。

在划分结构和组件时,需要考虑代码的可读性、维护性和扩展性。合理的目录结构和组件划分有助于减少代码冗余、提高开发效率,并使项目更易于维护和扩展。当然,具体的划分方式还需根据项目的特点和团队的实际需求进行调整。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vue vue
Projects
None yet
Development

No branches or pull requests

3 participants