请vue.cli项目中src目录每个文件夹和文件的用法

本文介绍了前端项目的典型文件夹组织方式,包括assets存放静态资源、components管理组件、router配置路由、view定义视图、app.vue作为主组件及main.js作为入口文件。

assets文件夹是放静态资源;
components是放组件;
router是定义路由相关的配置;
view视图;
app.vue是一个应用主组件;
main.js是入口文件

### 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> ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值