Vue2中几个目录
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}]
})
这样,你访问 http://localhost:8080/vote
时,就能看到你创建的投票页面了。
总结
assets
用来放静态资源。components
用来放页面中可复用的小组件。router
用来定义页面路径和导航规则。store
用来存放应用的全局状态(如果使用 Vuex 的话)。views
用来放页面文件,每个页面通常是一个.vue
文件。
希望这些解释能帮助你理解这些目录的作用!如果你需要更多关于如何在现有项目中添加代码的帮助,随时告诉我!