###
Vue-
cli 项目中 `
src`
目录下
文件夹和文件的具体作用及
用法
#### 1
. `assets`
`assets` 是放置静态资源的
目录，包括公共的 CSS
文件、JS
文件、字体
文件（如 iconfont）、图片等。这些资源会被 Webpack 构建处理，通常用于需要通过模块导入的资源[^3]。
```javascript
import logo from '@/assets/logo
.png';
```
#### 2
. `components`
`components` 是存放
Vue 组件的
目录。
每个组件通常是一个单独的 `
.vue`
文件，包含模板、脚本
和样式。这些组件可以在其他组件或页面中复用[^2]。
```javascript
// 示例组件 HelloWorld
.vue
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, World!'
};
}
};
</script>
```
#### 3
. `router`
`router`
目录包含前端路由配置
文件 `index
.js`。该
文件定义了应用中的所有路由规则，将路径映射到对应的组件[^4]。
```javascript
import
Vue from '
vue';
import Router from '
vue-router';
import HelloWorld from '@/components/HelloWorld';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
});
```
#### 4
. `views`
`views`
目录通常用于存放页面级组件，即对应于某个路由的完整页面。与 `components` 不同，`views` 中的组件通常是独立的页面入口[^2]。
```javascript
// 示例页面 Home
.vue
<template>
<div>Home Page</div>
</template>
```
#### 5
. `store`
`store`
目录用于管理
Vuex 状态。
Vuex 是
Vue 的状态管理库，`store` 中的
文件定义了全局状态、mutations、actions
和 getters[^2]。
```javascript
// 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++;
}
},
actions: {
increment({ commit }) {
commit('increment');
}
},
getters: {
doubleCount: (state) => state
.count * 2
}
});
```
#### 6
. `App
.vue`
`App
.vue` 是根组件，所有的子组件都嵌套在这个组件中。它通常包含应用的主要结构
和布局[^2]。
```html
<template>
<div id="app">
<router-view />
</div>
</template>
```
#### 7
. `main
.js`
`main
.js` 是
项目的入口
文件。在这里初始化
Vue 实例，并注册全局组件、插件
和路由。
```javascript
import
Vue from '
vue';
import App from '
./App
.vue';
import router from '
./router';
import store from '
./store';
Vue.config
.productionTip = false;
new
Vue({
router,
store,
render: (h) => h(App)
})
.$mount('#app');
```
#### 8
. `public`
在
Vue CLI 3 中，`public` 替代了 `static`
目录，用于存放不会被 Webpack 构建的静态资源，例如 favicon
.ico
和 index
.html[^1]。
```html
<!-- public/index
.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1
.0">
<title>
Vue App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
```
###
本文介绍了前端项目的典型文件夹组织方式，包括assets存放静态资源、components管理组件、router配置路由、view定义视图、app.vue作为主组件及main.js作为入口文件。
扫一扫
3440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
