Vue-cli工程项目中各个文件夹及文件的作用分析

Vue-cli工程项目中各个文件夹及文件的作用分析

1. build文件夹：存放webpack的相关配置以及脚本文件，在实际开发过程中只会偶尔用到webpack.base.conf.js，配置less、babel等编译器

2. config文件夹：常用到此文件夹下 config.js（index.js） 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。

3. node_modules：存放npm install命令下载的开发环境和生产环境的各种依赖

4.src文件：工程项目的源码以及资源，包括页面图片、路由组件、路由配置、vuex、入口文件等

其他文件：

 

vue 项目src文件夹结构和功能

 

assets:
放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。之所以强调是公共的 css 文件，是因为要在组件的 css 标签里加入 ‘scoped‘ 标记，将其作用范围限制在此组件以及调用它的父级组件中，避免污染全局样式；

components:
放置通用模块组件。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等，将它们作为通用组件，避免重复工作；

http:
放置与后台 api 相关的文件。这里面有 axios 库的实例配置文件、使用配置的 axios 实例接入 api 获取数据的函数的集合的文件；

mixins:
放置混合选项的文件。具体来说，相当于是公用函数的集合，在组件中引用时，可以作用于组件而不必书写重复的方法；

pages:
放置主要页面的组件。例如登录页、用户信息页等。通常是这里的组件本身写入一些结构，再引入通用模块组件，形成完整的页面；

router:
放置路由设置文件，指定路由对应的组件；

store:
放置 vuex 需要的状态关联文件，设置公共的 state、mutations 等；
App.vue: 入口组件，pages 里的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用；

main.js:
入口 js 文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等。

 

https://www.cnblogs.com/linbudu/p/11325203.html

https://blog.csdn.net/weixin_43043994/article/details/82183343