编辑“︁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++
    }
  }
})
```