vue项目说明文档

tips: 本项目大部分按照以下说明编写,不符合以下原则的部分,原因是vue-admin-template作者自身的编写特点,本人并未改动.

建议遵循该项目规则编写,当然如果觉得自己的规则更让你编写舒适的话,请无视建议,专注于项目说明本身

本项目选用vue-admin-template为模板

本项目地址

项目色系

参考variables.scss

项目目录

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

静态资源

本项目使用的图片 assets/img
本项目使用的图标 icons/svg

图标的具体使用查看 SvgIcon

styles

本项目采用scss编写样式

• variables 为全局变量声明,包括字体,颜色,宽高等
• sidebar 为侧边导航栏的样式表现
• transition 为全局动画
• element-ui 为修改 element-ui 的样式,如果有例如.changeLoginEle的父类名,则为局部修改,该例即为修改 login 页面的样式,否则即为修改全局 element 样式
• class 为全局样式类,本项目除少部分框架自带的样式采用普通类名编写样式,其余皆通过样式类名表现.
• 样式类规则:
  1. 用于定位的 top/right/bottom/left,使用内联 style 写入,不要使用样式类
  2. 涉及整体性的样式仍以整体写入,例如命名一个类名为 dot 的用以表现一个圆点的,内部书写的宽高,border-radius,不用拆开,但颜色需另外添加
  3. 通用组件不要使用样式类写法,保证通用组件的独立性

  <div class="dot bg-main"></div>
  

  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .bg-main {
    background: #ccc;
  }
  

layout

├── layout                     # 布局页面
│   ├── index.vue              # 主页面
│   ├── mixins                 # mixin方法
│   ├── components             # 子组件
│   │   ├── layout-header      # 顶部导航栏
│   │   │   ├── index.vue      # 顶部导航栏主页面
│   │   │   ├── components     # 顶部导航栏子组件
│   │   │   │   ├── header-scroll-pane.vue  # 标签导航栏滚动
│   │   │   │   ├── header-tags-view.vue    # 标签导航栏
│   │   ├── layout-main        # 主体内容区
│   │   ├── layout-sidebar     # 侧边导航栏
│   │   │   ├── index.vue      # 侧边导航栏主页面
│   │   │   ├── components     # 侧边导航栏子组件
│   │   │   │   ├── sidebar-item.vue     # 侧边导航栏子页面
│   │   │   │   ├── sidebar-submenu.vue  # 侧边导航菜单
│   │   │   │   ├── sidebar-link.vue     # 侧边导航菜单链接
│   │   │   │   ├── sidebar-logo.vue     # 侧边导航栏Logo

sidebar

• 如果要修改侧边导航栏的样式,请查看element-ui.scss
• 侧边导航栏划分为 logo 和导航区,导航栏采用路由导航,具体查看layout-sidebar/index.vue
• sidebar-submenu为一级菜单导航,采用了递归组件,判断了只有一个子菜单和多个子菜单的表现形式
• sidebar-item为子菜单导航

main

• 内容区主要是以二级路由的形式展示
• <keep-alive>是否需要缓存

header

• 顶部导航包括 面包屑,退出登录,以及标签导航,皆为原作者通用组件,不要在不了解其代码逻辑时修改

components

包括全局可通用的组件,有面包屑,表格,图标,选择器等,详细说明参考各组件
通用组件全部以文件夹+index.vue形式编写,文件夹名大写

• 通用组件的编写应该尽量保证全面
• 业务在引用通用组件时,在组件标签上尽量简洁,最好只包括两参数一事件,其他的包括样式等要么写在配置中,要么写在通用组件内
• 通用组件引入的时候建议以v-组件名的形式

<v-select :data="data" @change="handleChange" :settings="setings" />

通用组件不要使用样式类写法,保证通用组件的独立性

router

参考 vue-admin-template

store

建议:当能够使用父子组件通信时,请不要使用 vuex

采用模块化编写, 使用 async/await异步请求
各模块的 state 变量都最终通过父 getters 导出,因而各页面访问 state,不需要操作 state,只需要操作 getters,例如:

//getters.js
export default {
    user:state=>state.app.user
}
// xx.vue
import { mapGetters } from 'vuex';
computed:{ ...mapGstters['user'] }

• permission.js 路由验证,控制权限,配合utils/permission
• request.js 拦截请求,处理异常,配合api
• app.js 侧边导航栏相关
• user.js 用户相关(包括登录,信息,角色等)

utils

全局使用的通用方法

全局filter和directive也被归于此类

• auth.js 持久化存储相关
• date.js 日期格式相关
• function.js 全局 vue 方法
• request.js 请求相关
• validate.js 验证相关
• permission.js 权限相关

settings

全局通用常量配置

views

每一个模块都会对应侧边的路由,因而会分为单菜单模块和多菜单模块
统一使用英文小写,子组件以模块名-子组件名的形式

建议模块名以单词形式,小写,单词英文过长时,子组件可缩略为 3-5 个字母,

    login
    ├──login-main.vue
    settings
    ├──set-main.vue
    // 不建议使用
    System-settings
    Settings
    Settings-main.vue //等

子组件的 html 名需要以<login-main>形式,不要用大写或者单词 ,防止和 html 标签名冲突

<login-main>
  <!-- 以下不建议使用 -->
  <loginMain>
    <main>
      <main>
        <LoginMain></LoginMain>
      </main></main></loginMain
></login-main>

• constant.js文件用来存放该模块的常量

• components存放该页面的业务子组件

• mixin.js 存放组件之间完全相同的逻辑

• index.vue模块路由根组件,有且只有一个

• xx.vue 同属于该模块的其他组件,通常为跳转的详情页,操作页

  每个模块只会有一个components,若子组件也有其子组件,将会并列

模块

├── `404`        # 错误
├── `attendance` # 考勤系统
├── `login`      # 登录
├── `settings`   # 系统设置
│   ├── `permission`   # 权限管理

未完待续…