Vue-Cli 目录架构

目录解构

├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filters // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── 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

src目录解构解析

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

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

components：放置通用模块组件。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传…将它们作为通用组件，合理地使用组件可以高效地实现复用等功能，从而更好地开发项目。一般情况下比如创建头部组件的时候，我们会新建一个header的文件夹，然后再新建一个header.vue的文件

directive ：公用的自定义指令同一放在这个文件中。

filters ：所有的全局filters的文件同一放在这个文件中。

icons：存放 .svg 格式的icon文件

mock ：在项目过程中会用到模拟数据都会存放在这个文件夹中。

router：该文件夹下有一个叫index.js文件，放置路由设置文件，指定路由对应的组件

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

App.vue：入口组件，也可以理解为项目的主组件，可通过使用开放入口让其他的页面组件得以显示。views 里的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用。

main.js：入口文件，项目的核心文件，主要作用是初始化vue实例并使用需要的插件，引入全局使用的库、公共的样式和方法、设置路由…