活動助手項目記錄

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;