tobelulu / jyrdexamFont

公司员工在线考试项目前端项目

注：项目框架参照 wqb2017/vue-vant-axios 项目，致谢！

公司员工在线考试系统

当前项目为员工答题移动端 演示地址：http://exam.lvyi.club 后端演示地址：http://admin.lvyi.club

软件架构:vue+vantui+vue-router+axios+vuex

使用

This is a project template for vue-cli. It is recommended to use npm 3+ for a more efficient dependency tree.

$ npm install -g vue-cli
$ vue init  lovbe0210/jyrdexamFont  my-project-name
$ cd my-project-name
$ npm install
$ npm run dev

技术栈

1. 主技术栈

• vue
• vue-router
• vuex
• es6

2. UI 技术栈

• 移动端 vant
• axios

前端规范

• eslint standard

IDE

• vscode
• vscode 常用插件和配置

项目结构

|-项目名
    |-build
    |-config
    |-src
      |-components //公共组件
      |-assets //公共模块，包含图片、引用图标等
      |-directives //自定义指令
      |-filters //过滤器
      |-router  
      |-utils 
        |-request.js // 封装axios，设置跨越解决方案
      |-views
        |-api //业务方法API
          |-examing.js //提取业务方法
        |-components //业务公共组件
          |-exam-list-item
            |-index.vue //入口
            |-style.scss //样式
        |-home //首页
          |-entry
            |-index.vue 模块入口
            |-style.scss
      |-main.js //入口js，配置了vant按需引入和全局登陆检测

也许这些对您有帮助

• css 文件引入

  当我们要引入不是其本文件跟目录下的 css 文件时，记得使用 '~@文件名' 来简化 './../../....'这些相对路径

@import './../../../assets/css/mixin.scss';
//简化成功
@import '~@/assets/css/mixin.scss';

eslint + vscode做保存自动代码格式化

安装以下插件

• eslint-plugin-cypress
• eslint-plugin-html
• eslint-plugin-vue

在 package.json 加入一下代码

"lint-staged": {
  "*.js": [
    "vue-cli-service lint",
    "git add"
  ],
  "*.vue": [
    "vue-cli-service lint",
    "git add"
  ]
}

License

MIT