目录结构

Lin 的前端部分，是在 vue-cli3 生成的模板项目的基础上开发而来的 。当然对于本项目而言，你几乎可以不用关注 vue-cli3 的内容，如果你需要对 webpack 的配置进行更改，那么如果你对 vue-cli 的使用不熟悉，建议先阅读官方文档目录结构 - 图1。Lin 的开发遵循严格的目录结构和代码规范、我们希望你能对此达成共识，这非常有助于你后续的开发。

Lin 的前端部分代码结构如下：

  1. ├───public // 公共资源目录，该目录webpack原封打包
  2. │    ├───icons // icon图片存放目录
  3. │    │   favicon.ico // 本站favicon图片
  4. │    │   iconfont.css // 阿里iconfont文件
  5. │    │   index.html // template模板
  6. │    │   robots.txt // Robots协议
  7. ├───script // 脚本
  8. ├───src
  9. │    ├───assets // 静态资源文件存放目录
  10. │    ├───components // 布局组件及业务基础组件
  11. │    │   ├───layout // layout布局组件
  12. │    │   ├───base // 通用基础组件库（包含element-ui二次封装组件）
  13. │    ├───config // config配置项
  14. │    │   ├───stage // 路由配置文件
  15. │    │   │   error-code.js // 与服务端约定的错误状态码
  16. │    │   │   index.js // 前端自定义配置项
  17. │    ├───lin // Lin CMS核心库
  18. │    │   ├───directives // 全局指令
  19. │    │   ├───filter // 全局过滤器
  20. │    │   ├───mixin // 全局mixin
  21. │    │   ├───models // model层
  22. │    │   ├───utils // 各种工具函数
  23. │    ├───plugins // 插件
  24. │    ├───router // 前端路由
  25. │    │   ├───modules // 每个业务模型的路由树
  26. │    │   │   home-router.js // 菜单路由
  27. │    │   │   index.js // vue-router入口文件
  28. │    │   │   routes.js // vue-router路由配置
  29. │    ├───store // vuex状态管理文件
  30. │    ├───views // 业务组件
  31. │    │   App.vue // vue根组件
  32. │    │   main.js // webpack打包入口
  33. │   babel.config.js // babel配置文件
  34. │   .browserslistrc // 适配浏览器版本
  35. │   .eslintrc.js // eslint配置文件
  36. │   .gitignore // git上传忽略文件

解释说明

在上面我们针对每个目录都做了相应的注释，不过下面还有几个文件夹需要额外说明一下

  • public/icons 文件夹菜单栏的 icon 图标我们推荐用阿里的iconfont目录结构 - 图2，但是这并不满足一些同学需要用设计师设计的指定图标，所以我们提供了相应的机制，可以在路由配置文件直接填写路径。把 icons 文件夹放到 public 下，是因为任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack 。
  1.    {
  2.       title: '添加图书',
  3.       type: 'view',
  4.       name: 'bookAdd',
  5.       route: '/book/add',
  6.       filePath: 'views/book/BookAdd.vue',
  7.       inNav: true,
  8.       // icon: 'iconfont icon-demo', // 二选一，如果你的 icon 需要引用自己的图片文件
  9.       icon: 'icons/your-icon.png',
  10.     },
  • src/config/stage/ 文件夹这里注意，路由文件是以配置项形式提供，vue-router 读取的是这里的配置项文件

小结

希望通过阅读本小节，使你对 Lin 的前端部分有了初步的了解。通过目录结构不难看出，项目使用了大量的组件封装，这其实也是一种设计思想，让每个模块只做好一件事。

另外如果有疑问，请在 issue目录结构 - 图3 中提出，我们会及时回复并处理。