npm install -g electron

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

npm install -g electron-forge
electron-forge init my-new-app
cd my-new-app
npm start

1. 新建一个index.html main.js
2. npm init --yes 生成一个package.json
3.

npm install moment
var moment = require('moment');
moment().format();
moment().format('MM/DD/YYYY hh:mm:ss a dddd MMMM Do')

npm install validator
import validator from 'validator';
validator.isEmail('foo@bar.com'); //=> true
......

npm i --save lodash
var _ = require('lodash'); // 24Kb
var _ = require('lodash/core'); // 4Kb
......

npm i -S vuedraggable
import draggable from 'vuedraggable'
......
<draggable v-model="myArray">
  <transition-group>
      <div v-for="element in myArray" :key="element.id">
          {{element.name}}
      </div>
  </transition-group>
</draggable>

/**
* 简写 l:left; r:rihgt; b:bottom; t:top; z:z-index; bg:background; w:widht; h:height;
* w、h的值根据top.left.right.bottom来进行设置
* <div v-pos:top.left="data"></div>
* data: {
    t:0,
    l:0,
    w:50,
    h:50,
    bg:'red',
    z:9
  }
*/

Vue.directive('position', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var pos1 = ['left', 'right', 'bottom', 'top'].includes(binding.arg) ? binding.arg : 'left'
    el.style[pos1] = (binding.value[pos1.substring(0,1)] || '0') + 'px'
    el.style.background = binding.value.bg || 'red'
    binding.value.w && (el.style.width = binding.value.w + 'px')
    binding.value.h && (el.style.height = binding.value.h + 'px')
    el.style.zIndex =  binding.value.z || '0'
    let pos2 = Object.keys(binding.modifiers)
    pos2.map(p=>{
      el.style[p] = (binding.value[p.substring(0, 1)] || '0') + 'px'
    })
  }
})

  -----------------
  ajax.js
  import API from './base.js'
  export default {
    load(apiJSON){
      window._api = {...API}
      let apiGroups = Object.keys(apiJSON)
      apiGroups.forEach(group=>{
        let apiConfig = apiJSON[group]
        let allApis = {}
        if(apiConfig){
          if(apiConfig['get']){
            API.makeApiMethod(apiConfig['get'], allApis)
          }
          if(apiConfig['post']){
            API.makeApiMethod(apiConfig['post'], allApis, 'post')
          }
        }
        _api[group] = allApis
      })
    }
  }
  -----------------




  -----------------
  base.js
  import axios from 'axios'
  import siteOptions from '@/config/index'

  const serverBasePath = siteOptions['serverBasePath'] || '';
  const $http = axios.create({
    headers: {'X-Requested-With': 'XMLHttpRequest'}
  })

  // http 响应拦截.
  $http.interceptors.response.use(
    siteOptions['ajaxResponseFilter'] || (response=>response.data)
  )

  export default{
    axios,
    $http,
    customizeHttp(options){
      return this.$http = this.axios.create(options)
    },
    get (url, params, callback) {
      return this.$http.get(url, {
        params: params
      })
    },
    post (url, params, callback) {
      return this.$http.post(url, params)
    },
    makeApiMethod(source, target, method) {
      let getApiNames = Object.keys(source)
      getApiNames.forEach(apiName=>{
        target[apiName] = (params)=>{
          return this[method || 'get'](serverBasePath + source[apiName], params)
        }
      })
    }
  }
  -----------------




  1. 所有的 ajax api 在此文件夹下配置
  2. 根据业务模块，将 ajax api 划分成不同的 modules，放在各自的文件内，单独维护
  3. 这里提供两个示例模块 - site 与 biz1，项目中根据业务功能命名。
  4. 新加的业务模块，需要在 index.js 中注册才能生效，详见：index.js。

  import site from './modules/site'
  import biz1 from './modules/biz1'

  /**
  * 当前目录下的 modules 文件夹中，存放所有的业务模块所相关的 ajax api 路径。
  * site 与 biz1 为两个示例业务模块。
  *
  * ajax 调用示例：
  * _api.site.getUserInfo({
  *    // params...
  * }).then(result=>{
  *    // 回调
  * })
  *
  * 注意：
  * 1. 导出的模块名字必须与文件名一致。
  * 2. _api 为全局变量，直接使用，不需要显式引入。
  */
  export default {
    site,
    biz1
  }


  export default {
    get: {
      getUserInfo: "/user/get"
    },
    post: {
      getUserPerm: "/user/perm"
    }
  }



--------------
const isUseDevServerProxy = true
const isUseRapMockerTarget = false
const apiProxyTarget = 'http://dbms.dev.www.com:8081'
const apiProxyMatches = [
	'/user',
	'/api'
]

function addProxyOptions(options){
	if(!isUseDevServerProxy) return;
  let devProxyOptions = {
  }
  apiProxyMatches.forEach(api=>{
    devProxyOptions[api] = {
      target: apiProxyTarget,
      changeOrigin: true,
      bypass: function(req, res, proxyOpt){
        res.set('RAD-PROXY', 'on');
        res.set('RAD-PROXY-BY', apiProxyTarget);
      }
    }
    if(isUseRapMockerTarget){
      devProxyOptions[api]['pathRewrite'] = (path, req) => '/' + req.method + '/' + path
    }
  })
  options['devServer'] = options['devServer'] || {}
  options['devServer']['proxy'] = devProxyOptions
}

module.exports = addProxyOptions
------------------



import axios from 'axios';
import queryString from 'query-string';
import { Message } from 'element-ui';

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '/api';
}

let get = (url, params = {}) => {
  return new Promise((resolve) => {
    axios.get(url, params).then((response) => {
      resolve(response.data);
    });
  });
};

let post = (url, params = {}) => {
  return new Promise((resolve) => {
    axios.post(url, queryString.stringify(params), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    }).then((response) => {
      resolve(response.data);
    });
  });
};

let put = (url, params = {}) => {
  return new Promise((resolve) => {
    axios.put(url, queryString.stringify(params), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    }).then((response) => {
      resolve(response.data);
    });
  });
};

let putJSON = (url, params = {}) => {
  return new Promise((resolve) => {
    axios.put(url, JSON.stringify(params), {
      headers: {
        'Content-Type': 'application/json; charset=UTF-8'
      }
    }).then((response) => {
      resolve(response.data);
    });
  });
};

let postJSON = (url, params = {}) => {
  return new Promise((resolve) => {
    axios.post(url, JSON.stringify(params), {
      headers: {
        'Content-Type': 'application/json; charset=UTF-8'
      }
    }).then((response) => {
      resolve(response.data);
    });
  });
};

let del = (url, params = {}) => {
  return new Promise((resolve) => {
    axios.delete(url, params).then((response) => {
      resolve(response.data);
    });
  });
};

let upload = (url, params = {}, option = {}) => {
  let formData = new FormData();
  for (let _key in params) {
    formData.append(_key, params[_key]);
  }
  return new Promise((resolve) => {
    axios.post(url, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      onUploadProgress: function (event) {
        if (typeof option.onUploadProgress === 'function') {
          option.onUploadProgress(event);
        }
      }
    }).then((response) => {
      resolve(response.data);
    });
  });
};

// axios.interceptors.request.use((config) => {
//   return config;
// }, function (err) {
//   return Promise.reject(err);
// });

axios.interceptors.response.use((response) => {
  return response;
}, (error) => {
  if (!error.response) {
    if (
      location.hostname ==
      'ops.www.com'
    ) {
      location.href =
        'https://sso.www.com/user/login?system_key=v2';
    } else {
      location.href =
        'https://sso.test.www.com/user/login?redirect_url=' +
        location.href;
    }
  } else {
    Message.error(error.message);
  }
});

export default {
  get,
  post,
  put,
  del,
  upload,
  putJSON,
  postJSON
};


import ajax from '@/util/ajax';
let batchAdd = params => {
  return ajax.postJSON('/agent_conf_app/batch', params);
};
export default {
  batchAdd
};

  #watermark{
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    // 水印 mask, 盖在最上层.
    z-index: 2147483647;
    pointer-events: none;
  }

  引入 __punch.js 水印
  -----
  export default {
    isShowWatermark: true,
    getWatermark(){
      return new Promise(function(resolve, reject) {
        resolve({
          name: '用户名',
          id: 'ID'
        });
      }).then((user)=>{
        return {
          name: user['name'],
          id: user['id']
        }
      });
      //return _api.site.getUserInfo()
    }
  }
  -----

  export function renderWatermark(watermarkStr){
	if(siteOptions['isShowWatermark'] === true) {
		siteOptions['getWatermark']().then(user=>{
			watermarkStr = user['name'] + '-' + user['id']
			let $watermark = document.querySelector('#watermark')
			if(watermarkStr && $watermark && window['__punch']){
				__punch.to($watermark, watermarkStr, {
					width: 250,	//水印单元宽度
					height: 80,	//水印单元高度
					bg: 'transparent',	//水印背景
					bgAlpha: 0,		//水印背景透明度
					color: '#AAA',	//水印字体颜色
					alpha: 0.20,	//水印字体颜色透明度
					font: '14px Arial'	//水印字体
				})
			}
		})
	}
}

function enableTracker(){
  let tickerSDK = 'https://img-wwwww.wwwww.com/weixin/mall/cdn/ticker/ticker.min.2.0.6.js'
  let script = document.createElement("script");
  script.type = "text/javascript";
  script.src = tickerSDK;
  script.onload = function(){
    mxticker.init({
  // 是否启用埋点.
  isTrackUser: true,
  // 若启用埋点，则需要配置初始化选项.
  trackerOptions: {
    av: 1,
    as: 3,
    bu_id: 2,
    api: '//loganalytics.wwwww.com/log'
  }
})
  }
  document.head.appendChild(script);
}