持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

今天来总结一下Vue-cli工程中每个文件夹和文件的用处

• dist文件夹：

默认npm run build命令打包生成的静态资源文件，用于生产部署

• node_modules：

存放npm命令下载的开发环境和生产环境的依赖包

• public：有的叫assets：

• 存放项目中需要用到的资源文件，css，js，images以及index

• src文件夹：

存放项目源码以及需要引用的资源文件

• src—api文件夹：

放ajax相关操作的代码文件：index.js(相关的接口)，ajax.js(封装的axios，拦截器)。有的叫service：自己配置的vue请求后台接口方法

• src—common文件夹：

stylus混合文件.styl，不要写到public也可以

• src—components文件夹：

存放vue开发中抽离的一些公共组件

• src-mock文件夹：

mock数据存放文件以及mock模拟接口(没有后台接口或者接口不完整情况下可以使用模拟后台接口)

• src-pages文件夹：

涉及到路由的组件

• src-store文件夹：

存放vue中的状态数据，用vuex集中管理

• App.vue文件：

使用标签渲染整个工程的.vue组建

• main.js文件：

vue-cli工程的入口文件

• package.json文件：

用于node_modules资源部和启动，打包项目的npm命令管理

• build文件夹：

用于存放webpack相关配置和脚本。开发中仅偶尔使用到此文件夹下webpack.base.conff.js用于配置less，sass等css预编译库，或者配置一下ui组件库

• condig文件夹：

主要存放配置文件，用于ubie开发环境，线上环境的不同，常用到此文件夹下coonfig.js配置开发环境的端口号，是否开启热加载或者设置生产环境的静态资源相对路径，是否开启gzip压缩，npm run build命令打包生成静态资源的名称和路径等