当前位置：首页 > news >正文

Vue2中几个目录

news 2024/10/24 12:28:05

1. `assets` 目录

作用: 存放静态资源，比如图片、字体、CSS 文件等。
内容: 通常你会把项目中的图片、视频、音频文件，或者全局的样式文件（比如全局 CSS 文件）放在这里。

2. `components` 目录

作用: 存放 Vue 的组件文件。
内容: 你可以在这个目录中创建 Vue 的组件文件，这些组件是页面的组成部分。通常，一个组件可以是页面的一部分，比如按钮、表单、投票选项等。文件的命名通常是 *.vue，比如 VoteOption.vue。
用法: 比如在这里你可以创建一个 VoteOption.vue 组件，然后在其他地方引用和使用它。

components/└─ VoteOption.vue  # 投票选项组件

3. `router` 目录

作用: 存放项目的路由配置，控制不同页面或视图的跳转。
内容: 主要有 index.js 文件，定义了页面与 URL 之间的映射。比如说，如果你的项目有多个页面，路由可以决定在用户访问 /vote 还是 /results 时，显示哪个页面。

router/└─ index.js  # 路由配置

例如，你可以在路由配置中为一个新的投票页面添加路径：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import VotePage from '../views/VotePage.vue'Vue.use(Router)export default new Router({routes: [{path: '/vote',name: 'Vote',component: VotePage}]
})

4. `store` 目录

作用: 用于存储 Vuex 相关的状态管理文件。
内容: 如果你的项目使用了 Vuex（Vue.js 的状态管理模式），这个目录里通常有一个 store.js 文件，用于集中管理应用的全局状态（比如投票的数据、用户状态等）。

store/└─ index.js  # Vuex 状态管理

如果你使用 Vuex，可以在 store/index.js 中定义一些全局的状态和修改状态的方法。

5. `views` 目录

作用: 存放 Vue 的页面组件，每个页面是独立的视图。
内容: 这个目录中的文件是整个应用的页面。比如首页、关于页面、投票页面等，每个页面通常也是一个 *.vue 文件。每个页面可能会包含多个子组件（存放在 components 中），但页面文件通常定义整个页面的结构。

views/└─ VotePage.vue  # 投票页面

在这个目录中，你可以创建一个 VotePage.vue 文件，这个文件就是完整的投票页面。

如何使用这些目录？

1. 创建投票页面（`views/VotePage.vue`）

你可以在 views 目录中创建一个 VotePage.vue 文件，作为投票页面。你可以将之前的代码放在这个文件中。

views/└─ VotePage.vue

<!-- views/VotePage.vue -->
<template><div><h2>投票页面</h2><ul><li v-for="vote in votes" :key="vote.id">{{ vote.option }}: {{ vote.count }} 票<button @click="vote(vote.id)">投票</button></li></ul></div>
</template><script>
export default {data() {return {votes: [{ id: 1, option: "选项A", count: 0 },{ id: 2, option: "选项B", count: 0 },{ id: 3, option: "选项C", count: 0 }]};},methods: {vote(id) {const vote = this.votes.find(v => v.id === id);if (vote) {vote.count++;}}}
};
</script><style scoped>
button {margin: 10px;
}
</style>

2. 配置路由（`router/index.js`）

你需要在 router/index.js 中添加一条新路由，让 /vote 这个路径能够展示 VotePage.vue。

import Vue from 'vue'
import Router from 'vue-router'
import VotePage from '../views/VotePage.vue'Vue.use(Router)export default new Router({routes: [{path: '/vote',name: 'Vote',component: VotePage}]
})