![[vue学习]vue项目的文件和目录结构_第1张图片](http://img.e-com-net.com/image/info10/788d7c687c84474391ffb5cb42fc9ba1.jpg)
目录结构：
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 接口
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ │ ├── index.js //注入所有vuex相关，并导出
│ │ ├── getters.js //store的计算属性
│ │ ├── muattion.js //更改store中的状态（唯一方法）
│ │ ├── state.js //储存状态
│ │ └── actions.js //维护异步数据
│ └── Tinymce // 富文本
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
/(根)目录下文件
.babeirc
这是babel的配置文件, ES6是2015年发布的下一代javascript语言标准，它引入了新的语法和API，使我们编写js代码更加得心应手，比如class，let,for...of promise等等这样的，但是可惜的是这些js新特性只被最新版本的浏览器支持，但是低版本浏览器并不支持，那么低版本浏览器下就需要一个转换工具，把es6代码转换成浏览器能识别的代码，babel就是这样的一个工具。可以理解为 babel是javascript语法的编译器。详细的配置参考深入浅出的webpack构建工具---babel之配置文件.babelrc(三)、babel中文网
.eslintrc.js
这是eslint配置文件，ESLint是可组装的JavaScript和JSX检查工具， 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具，它的目标是保证代码的一致性和避免错误。详细配置参数请参考List of available rule、了解ESlint和其相关操作、Vue中ESlint配置文件eslintrc.js文件详解
.eslintignore是忽略eslintrc规则的文件列表，将文件名加入其中可以避免eslint的语法检查
.editorconfig
官网是这么介绍EditorConfig的，“EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。EditorConfig项目由用于定义编码样式的文件格式和一组文本编辑器插件组成，这些插件使编辑器能够读取文件格式并遵循定义的样式。EditorConfig文件易于阅读，并且与版本控制系统配合使用。”
不同的开发人员，不同的编辑器，有不同的编码风格，而EditorConfig就是用来协同团队开发人员之间的代码的风格及样式规范化的一个工具，而.editorconfig正是它的默认配置文件。
简单来说编辑器配置文件，是编辑器自身的配置文件，定义了编辑器的一些设置比如字符类型等等，可以移植到其他编辑器，参数配置参考# 好奇，项目根目录下的.editorconfig文件、editorConfig编辑器配置
.gitignore
配置在该文件中的文件列表不会被提交到github或者其他代码仓库上
.postcssrc.js
PostCSS是一款使用插件去转换CSS的工具，有许多非常好用的插件，例如autoprefixer,cssnext以及CSS Modules。而上面列举出的这些特性，都是由对应的postcss插件去实现的。而使用PostCSS则需要与webpack或者parcel结合起来。
官方网站postcss.org/、配置参考PostCSS真的太好用了！
index.html
是项目本身的模板文件，里面定义了基本的html参数比如标签,
和等.package.json
保存的是一些基础的数据,在项目创建时填的如名称等信息全部保存在这,此外还有一些项目默认的配置信息和依赖包信息如版本号等保存在这
/(根)目录下文件夹
/static
里面存着项目的静态文件,webpack发布时不会对里面的文件做任何处理,直接拷贝过去,由于这个特性因此只能使用绝对路径来访问
/test
装着e2e和unit测试的文件夹,内含相应的启动文件和配置文件等
/build
build是编译相关的文件夹,里面都是webpack编译设置文件
/config
是webpack的配置文件
/node_modules
node依赖包文件夹,里面也包含node的插件,可以在里面配置node插件参数
/src
src文件夹是项目的资源文件（asset）、组件（components）、路由（router）、main.js
/src/asset/
asset下也是静态资源,但是有些不同,在*.vue组件中，所有的templates和css都会被vue-html-loader 和 css-loader解析，寻找资源的URL。举个例子，在
和 background: url(./logo.png), "./logo.png"中，都是相对资源路径，都会被Webpack解析成模块依赖 。相对URL, e.g. ./assets/logo.png 将会被解释成一个模块依赖。它们会被一个基于你的Webpack输出配置自动生成的URL替代。关于asset和static的区别请参考# webpack中的静态资源处理
简单说,就是asset是模块化的静态,使用相对路径来查找
/src/components/
主要是组件,并且是公共组件存放在这
/src/router/
主要是页面跳转相关配置
/src/main.js
主要是导入vue相关包和生成vue实例,相当于一个入口
如有帮助,欢迎点赞收藏,您的支持是我最大的动力