目录结构

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

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

├───public // 公共资源目录,该目录webpack原封打包
│    ├───icons // icon图片存放目录
│    │   favicon.ico // 本站favicon图片
│    │   iconfont.css // 阿里iconfont文件
│    │   index.html // template模板
│    │   robots.txt // Robots协议
├───script // 脚本
├───src
│    ├───assets // 静态资源文件存放目录
│    ├───components // 布局组件及业务基础组件
│    │   ├───layout // layout布局组件
│    │   ├───base // 通用基础组件库(包含element-ui二次封装组件)
│    ├───config // config配置项
│    │   ├───stage // 路由配置文件
│    │   │   error-code.js // 与服务端约定的错误状态码
│    │   │   index.js // 前端自定义配置项
│    ├───lin // Lin CMS核心库
│    │   ├───directives // 全局指令
│    │   ├───filter // 全局过滤器
│    │   ├───mixin // 全局mixin
│    │   ├───models // model层
│    │   ├───utils // 各种工具函数
│    ├───plugins // 插件
│    ├───router // 前端路由
│    │   ├───modules // 每个业务模型的路由树
│    │   │   home-router.js // 菜单路由
│    │   │   index.js // vue-router入口文件
│    │   │   routes.js // vue-router路由配置
│    ├───store // vuex状态管理文件
│    ├───views // 业务组件
│    │   App.vue // vue根组件
│    │   main.js // webpack打包入口
│   babel.config.js // babel配置文件
│   .browserslistrc // 适配浏览器版本
│   .eslintrc.js // eslint配置文件
│   .gitignore // git上传忽略文件

解释说明

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

  • public/icons 文件夹

菜单栏的 icon 图标我们推荐用阿里的iconfont,但是这并不满足一些同学需要用设计师设计的指定图标,所以我们提供了相应的机制,可以在路由配置文件直接填写路径。把 icons 文件夹放到 public 下,是因为任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack

   {
      title: '添加图书',
      type: 'view',
      name: 'bookAdd',
      route: '/book/add',
      filePath: 'views/book/BookAdd.vue',
      inNav: true,
      // icon: 'iconfont icon-demo', // 二选一,如果你的 icon 需要引用自己的图片文件
      icon: 'icons/your-icon.png',
    },
  • src/config/stage/ 文件夹

这里注意,路由文件是以配置项形式提供,vue-router 读取的是这里的配置项文件

小结

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

另外如果有疑问,请在 issue 中提出,我们会及时回复并处理。

    上次更新: 3/26/2019, 5:01:39 PM