活动助手项目记录

1. 项目前期准备，熟悉需求，画流程图，和设计碰页面。关于交互和实现的一些问题
2. 搭建前端页面框架，需要用到的技术以及难点。
3. 对技术难点模拟实现

项目简介 

         活动助手针对公司开展某项活动，员工进行打卡，考勤，请假等业务。web端的后台管理和小程序端的打卡签到。web端是活动管理后台，包括员工的数据管理，活动管理，活动统计等功能

         。小程序端实现消息提醒，获取位置信息，生成二维码签到。

项目技术

        此项目基于vue-cli搭建，用到了axios，element-ui，vue-x，   vue-router，sass等技术

        

vue全局安装注册组件       

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  `@/components`,
  // 是否查询其子目录
  true,
  // 匹配基础组件文件名的正则表达式
  /\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)
  const componentName = upperFirst(camelCase(fileName.split('/').pop().replace(/.vue$/, '')))
  componentConfig.default.props = ['parameter']
  // 全局注册组件
  Vue.component(
    componentName,
    componentConfig.default || componentConfig
  )
})

 

 全局安装vuex组件

import Vue from 'vue'
import Vuex from 'vuex'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
Vue.use(Vuex)
const requireComponent = require.context(
  // 其组件目录的相对路径
  `@/store/modules`,
  // 是否查询其子目录
  true,
  // 匹配基础组件文件名的正则表达式
  /\w+\.(vue|js)$/
)
let modules = {modules: { }}
requireComponent.keys().map(fileName => {
  const componentConfig = requireComponent(fileName)
  modules.modules[upperFirst(camelCase(fileName.split('/').pop().replace(/.js/, '')))] = componentConfig.default || {}
})
export default new Vuex.Store(modules)

 

安装sass  vue安装sass

分散知识点

 

vue动态添加class
<div :class="show ? 'dialog' : '' "></div>

<div :class="{ 'class-a': isA, 'class-b': isB}">Demo4</div>

HTML代码：
<div :class="objectClass">Demo5</div>

Javascript代码：
data: {
  objectClass: {
    class-a: true,
    class-b: false
  }
}

HTML代码：
<div :class="[classA, classB]">Demo6</div>

Javascript代码：
data: {
  classA: 'class-a',
  classB: 'class-b'
}

css中写表达式
1 #div{
2 position:absolute;
3 left:expression(document.body.offsetWidth-200+"px");  
4 top:expression(document.body.offsetHeight-250+"px");  
5 }

box-shadow

box-shadow: offset-x offset-y blur spread color position;