科技与资讯►教程

一个常见的 Vue 目录架构示例

Vue 是一个前端架构，这个分享一个常见的 Vue 目录架构示例。

当使用Vue.js开发一个项目时，下面是一个常见的目录架构示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
my-project/
  ├── public/
  │   ├── index.html
  │   └── favicon.ico
  ├── src/
  │   ├── assets/
  │   │   ├── css/
  │   │   ├── images/
  │   │   └── ...
  │   ├── components/
  │   │   ├── common/
  │   │   │   ├── Navbar.vue
  │   │   │   ├── Sidebar.vue
  │   │   │   └── ...
  │   │   ├── pages/
  │   │   │   ├── Home.vue
  │   │   │   ├── About.vue
  │   │   │   └── ...
  │   │   └── ...
  │   ├── plugins/
  │   │   ├── axios.js
  │   │   ├── vuetify.js
  │   │   └── ...
  │   ├── router/
  │   │   └── index.js
  │   ├── store/
  │   │   ├── modules/
  │   │   │   ├── user.js
  │   │   │   └── ...
  │   │   ├── getters.js
  │   │   ├── mutations.js
  │   │   ├── actions.js
  │   │   └── index.js
  │   ├── App.vue
  │   └── main.js
  ├── tests/
  ├── .eslintrc.js
  ├── .prettierrc
  ├── babel.config.js
  ├── package.json
  └── README.md

这个示例中包含了一个典型的Vue项目的目录结构。

  • public/目录中包含了应用程序的入口页面index.html和一些公共资源，例如favicon图标等。

  • src/目录是整个项目的主要源代码目录。

    • assets/目录用于存放项目中使用的样式表、图片和其他资源文件。
    • components/目录用于存放通用的可复用组件，可以根据需要进一步划分为common/和pages/子目录。
    • plugins/目录用于存放Vue插件，例如axios或Vuetify等。
    • router/目录包含Vue Router的配置文件index.js，用于管理应用程序的路由。
    • store/目录包含Vuex的配置和状态管理代码。其中modules/目录用于存放模块化的状态。
    • App.vue是根组件，是整个应用程序的入口点。
    • main.js是Vue应用程序的主配置文件，包含各种设置和引入的插件。

  • tests/目录用于存放测试文件。

  • .eslintrc.js是ESLint的配置文件，用于定义代码质量规则。

  • .prettierrc是Prettier的配置文件，用于定义代码格式化规则。

  • babel.config.js是Babel的配置文件，用于转译JavaScript代码。

  • package.json是项目的配置文件，包含了依赖和脚本命令等信息。

  • README.md是项目的说明文档。

你想与我联系吗？请点击以下链接即可。
点我与BG7IAE联系
跳转链接后，点击“切换个人身份登录”且用微信扫码登录。
如果你是从微信内打开这个链接，则不需要点击切换且可直接登录并填写表单。

本文发表日期：