编辑“︁Vue.js项目结构”︁

= Vue.js项目结构 =

== 介绍 ==  
Vue.js项目结构是指一个Vue应用程序的目录和文件组织方式。合理的项目结构能够提高代码的可维护性、可扩展性和团队协作效率。本部分将详细介绍Vue.js项目的典型结构，并解释每个核心文件和目录的作用。

== 标准Vue.js项目结构 ==  
使用Vue CLI（官方脚手架工具）创建的项目通常遵循以下目录结构：  

```plaintext
my-vue-project/
├── node_modules/          # 项目依赖的第三方库
├── public/                # 静态资源（不经过Webpack处理）
│   ├── index.html         # 主HTML文件
│   └── favicon.ico        # 网站图标
├── src/                   # 项目核心代码
│   ├── assets/            # 静态资源（经过Webpack处理）
│   ├── components/        # 可复用的Vue组件
│   ├── views/             # 页面级组件
│   ├── router/            # 路由配置
│   ├── store/             # Vuex状态管理
│   ├── services/          # API服务层
│   ├── utils/             # 工具函数
│   ├── App.vue            # 根组件
│   └── main.js            # 应用入口文件
├── .gitignore             # Git忽略配置
├── package.json           # 项目依赖和脚本
└── README.md              # 项目说明
```

=== 关键文件与目录详解 ===  

==== 1. `public/index.html` ====  
这是应用的入口HTML文件，包含一个`<div id="app"></div>`占位符，Vue会将根组件挂载到这里。  

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Vue App</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>
```

==== 2. `src/main.js` ====  
应用的JavaScript入口文件，初始化Vue实例并挂载到DOM。  

```javascript
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')
```

==== 3. `src/App.vue` ====  
根组件，通常包含全局布局（如导航栏和页脚）。  

```vue
<template>
  <div id="app">
    <router-view/>  <!-- 路由渲染的页面 -->
  </div>
</template>
```

==== 4. `src/components/` 和 `src/views/` ====  
* **`components/`**：存放可复用的UI组件（如按钮、卡片）。  
* **`views/`**：存放页面级组件（如首页、用户页）。  

示例组件 (`src/components/Button.vue`)：  
```vue
<template>
  <button class="my-button" @click="handleClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  props: ['text'],
  methods: {
    handleClick() {
      this.$emit('clicked');
    }
  }
}
</script>
```

==== 5. `src/router/` ====  
定义路由配置（使用Vue Router）。  

```javascript
// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home }
  ]
})
```

==== 6. `src/store/` ====  
Vuex状态管理目录（适用于大型应用）。  

```javascript
// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})
```

== 进阶项目结构 ==  
对于企业级项目，可能需要更复杂的结构：  

```plaintext
src/
├── modules/               # 按功能模块划分
│   ├── auth/              # 认证模块
│   │   ├── components/
│   │   ├── store/
│   │   └── routes.js
├── tests/                 # 单元测试
└── styles/                # 全局样式
```

=== Mermaid 图表示例 ===  
以下是一个Vue组件与Vuex交互的流程图：  

<mermaid>
graph LR
  A[Component] -->|dispatch| B(Vuex Action)
  B -->|commit| C(Vuex Mutation)
  C -->|mutate| D(Vuex State)
  D -->|render| A
</mermaid>

== 实际案例 ==  
假设构建一个任务管理应用：  
1. **`views/TaskList.vue`**：显示任务列表。  
2. **`store/modules/tasks.js`**：管理任务状态。  
3. **`services/taskApi.js`**：封装API调用。  

```javascript
// services/taskApi.js
export const fetchTasks = () => {
  return axios.get('/api/tasks')
}
```

== 总结 ==  
合理的Vue.js项目结构能显著提升开发体验。关键原则包括：  
* 按功能或模块组织代码。  
* 分离UI组件和业务逻辑。  
* 使用Vuex管理全局状态。  
* 保持目录命名一致（如`views/` vs `pages/`）。  

初学者可以从基础结构开始，逐步扩展以适应复杂需求。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js项目架构]]