'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');

gulp.task('compile', function() {
  return gulp.src('./src/*.scss')
    .pipe(sass.sync())
    .pipe(autoprefixer({
      browsers: ['ie > 9', 'last 2 versions'],
      cascade: false
    }))
    .pipe(cssmin())
    .pipe(gulp.dest('./lib'));
});

gulp.task('copyfont', function() {
  return gulp.src('./src/fonts/**')
    .pipe(cssmin())
    .pipe(gulp.dest('./lib/fonts'));
});

gulp.task('build', ['compile', 'copyfont']);

var sass = require('gulp-sass');
...
sass.sync()

axios.get('https://api.github.com/users/' + username)
  .then(function(response){
    console.log(response.data); 
    console.log(response.status); 
  });  

axios.post('/save', { firstName: 'Marlon', lastName: 'Bernardes' })
  .then(function(response){
    console.log('saved successfully');
  })
  .catch(function (error) {
    console.log(error);
  });  

axios.all([
    axios.get('https://api.github.com/xxx/1'),
    axios.get('https://api.github.com/xxx/2')
  ])
  .then(axios.spread(function (userResp, reposResp) {
    // 上面两个请求都完成后，才执行这个回调方法
    console.log('User', userResp.data);
    console.log('Repositories', reposResp.data);
  }));

var config = {
  essay-headers: {'X-My-Custom-Header': 'Header-Value'}
};

axios.get('https://api.github.com/users/xxx', config);
axios.post('/save', { firstName: 'Marlon' }, config);

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});

axios.interceptors.request.eject(myInterceptor);

npm install axios

bower install axios

https://github.com/mzabriskie/axios/tree/master/dist

var axios = require('axios')
axios.get('https://api.github.com/users/xxx');

"scripts": {
    "bootstrap": "yarn || npm i",
    "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
    "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
    "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
    "build:umd": "node build/bin/build-locale.js",
    "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
    "deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
    "dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
    "dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
    "dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
    "i18n": "node build/bin/i18n.js",
    "lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
    "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh",
    "test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
    "test:watch": "npm run build:theme && karma start test/unit/karma.conf.js"
  },

"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js"

'use strict';

var postcss = require('postcss');
var fs = require('fs');
var path = require('path');
var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8');
var nodes = postcss.parse(fontFile).nodes;
var classList = [];

nodes.forEach((node) => {
  var selector = node.selector || '';
  var reg = new RegExp(/\.el-icon-([^:]+):before/);
  var arr = selector.match(reg);
  
  if (arr && arr[1]) {
    classList.push(arr[1]);
  }
});

fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList), () => {
});

[ AtRule {
    raws: { before: '', between: '', afterName: ' ' },
    type: 'atrule',
    name: 'import',
    parent:
     Root {
       raws: [Object],
       type: 'root',
       nodes: [Circular],
       source: [Object] },
    source: { start: [Object], input: [Input], end: [Object] },
    params: '"common/var"' },
  AtRule {
    raws:
     { before: '\r\n\r\n',
       between: ' ',
       afterName: '',
       semicolon: false,
       after: '\r\n' },
    type: 'atrule',
    name: 'font-face',
    parent:
     Root {
       raws: [Object],
       type: 'root',
       nodes: [Circular],
       source: [Object] },
    source: { start: [Object], input: [Input], end: [Object] },
    params: '',
    nodes:
     [ [Declaration],
       [Declaration],
       [Comment],
       [Declaration],
       [Declaration] ] },
  Rule {
    raws:
     { before: '\r\n\r\n',
       between: ' ',
       semicolon: true,
       after: '\r\n' },
    type: 'rule',
    nodes:
     [ [Comment],
       [Declaration],
       [Declaration],
       [Declaration],
       [Declaration],
       [Declaration],
       [Declaration],
       [Declaration],
       [Declaration],
       [Declaration],
       [Comment],
       [Declaration],
       [Declaration] ],
    parent:
     Root {
       raws: [Object],
       type: 'root',
       nodes: [Circular],
       source: [Object] },
    source: { start: [Object], input: [Input], end: [Object] },
    selector: '[class^="el-icon-"], [class*=" el-icon-"]' },
  Rule {
    raws:
     { before: '\r\n\r\n', between: ' ', semicolon: true, after: ' ' },
    type: 'rule',
    nodes: [ [Declaration] ],
    parent:
     Root {
       raws: [Object],
       type: 'root',
       nodes: [Circular],
       source: [Object] },
    source: { start: [Object], input: [Input], end: [Object] },
    selector: '.el-icon-info:before' },
 ...
 ...
 ...
  Rule {
    raws:
     { before: '\r\n', between: ' ', semicolon: true, after: '\r\n' },
    type: 'rule',
    nodes: [ [Declaration] ],
    parent:
     Root {
       raws: [Object],
       type: 'root',
       nodes: [Circular],
       source: [Object] },
    source: { start: [Object], input: [Input], end: [Object] },
    selector: '.el-icon--left' },
  AtRule {
    raws:
     { before: '\r\n\r\n',
       between: ' ',
       afterName: ' ',
       semicolon: false,
       after: '\r\n' },
    type: 'atrule',
    name: 'keyframes',
    parent:
     Root {
       raws: [Object],
       type: 'root',
       nodes: [Circular],
       source: [Object] },
    source: { start: [Object], input: [Input], end: [Object] },
    params: 'rotating',
    nodes: [ [Rule], [Rule] ] } ]

[class^="el-icon-"], [class*=" el-icon-"]
.el-icon-info:before
.el-icon-error:before
.el-icon-success:before
.el-icon-warning:before
.el-icon-question:before
.el-icon-back:before
.el-icon-arrow-left:before
.el-icon-arrow-down:before
.el-icon-arrow-right:before
.el-icon-arrow-up:before
.el-icon-caret-left:before
.el-icon-caret-bottom:before
.el-icon-caret-top:before
.el-icon-caret-right:before
.el-icon-d-arrow-left:before
.el-icon-d-arrow-right:before
.el-icon-minus:before
.el-icon-plus:before
.el-icon-remove:before
.el-icon-circle-plus:before
.el-icon-remove-outline:before
.el-icon-circle-plus-outline:before
.el-icon-close:before
.el-icon-check:before
.el-icon-circle-close:before
.el-icon-circle-check:before
.el-icon-circle-close-outline:before
.el-icon-circle-check-outline:before
.el-icon-zoom-out:before
.el-icon-zoom-in:before
.el-icon-d-caret:before
.el-icon-sort:before
.el-icon-sort-down:before
.el-icon-sort-up:before
.el-icon-tickets:before
.el-icon-document:before
.el-icon-goods:before
.el-icon-sold-out:before
.el-icon-news:before
.el-icon-message:before
.el-icon-date:before
.el-icon-printer:before
.el-icon-time:before
.el-icon-bell:before
.el-icon-mobile-phone:before
.el-icon-service:before
.el-icon-view:before
.el-icon-menu:before
.el-icon-more:before
.el-icon-more-outline:before
.el-icon-star-on:before
.el-icon-star-off:before
.el-icon-location:before
.el-icon-location-outline:before
.el-icon-phone:before
.el-icon-phone-outline:before
.el-icon-picture:before
.el-icon-picture-outline:before
.el-icon-delete:before
.el-icon-search:before
.el-icon-edit:before
.el-icon-edit-outline:before
.el-icon-rank:before
.el-icon-refresh:before
.el-icon-share:before
.el-icon-setting:before
.el-icon-upload:before
.el-icon-upload2:before
.el-icon-download:before
.el-icon-loading:before
.el-icon-loading
.el-icon--right
.el-icon--left

arr: null
arr: null
arr: null
arr: [ '.el-icon-info:before',
  'info',
  index: 0,
  input: '.el-icon-info:before',
  groups: undefined ]
arr: [ '.el-icon-error:before',
  'error',
  index: 0,
  input: '.el-icon-error:before',
  groups: undefined ]
arr: [ '.el-icon-success:before',
  'success',
  index: 0,
  input: '.el-icon-success:before',
  groups: undefined ]
arr: [ '.el-icon-warning:before',
  'warning',
  index: 0,
  input: '.el-icon-warning:before',
  groups: undefined ]
arr: [ '.el-icon-question:before',
  'question',
  index: 0,
  input: '.el-icon-question:before',
  groups: undefined ]
arr: [ '.el-icon-back:before',
  'back',
  index: 0,
  input: '.el-icon-back:before',
  groups: undefined ]
arr: [ '.el-icon-arrow-left:before',
  'arrow-left',
  index: 0,
  input: '.el-icon-arrow-left:before',
  groups: undefined ]
arr: [ '.el-icon-arrow-down:before',
  'arrow-down',
  index: 0,
  input: '.el-icon-arrow-down:before',
  groups: undefined ]
arr: [ '.el-icon-arrow-right:before',
  'arrow-right',
  index: 0,
  input: '.el-icon-arrow-right:before',
  groups: undefined ]
arr: [ '.el-icon-arrow-up:before',
  'arrow-up',
  index: 0,
  input: '.el-icon-arrow-up:before',
  groups: undefined ]
arr: [ '.el-icon-caret-left:before',
  'caret-left',
  index: 0,
  input: '.el-icon-caret-left:before',
  groups: undefined ]
arr: [ '.el-icon-caret-bottom:before',
  'caret-bottom',
  index: 0,
  input: '.el-icon-caret-bottom:before',
  groups: undefined ]
arr: [ '.el-icon-caret-top:before',
  'caret-top',
  index: 0,
  input: '.el-icon-caret-top:before',
  groups: undefined ]
arr: [ '.el-icon-caret-right:before',
  'caret-right',
  index: 0,
  input: '.el-icon-caret-right:before',
  groups: undefined ]
arr: [ '.el-icon-d-arrow-left:before',
  'd-arrow-left',
  index: 0,
  input: '.el-icon-d-arrow-left:before',
  groups: undefined ]
arr: [ '.el-icon-d-arrow-right:before',
  'd-arrow-right',
  index: 0,
  input: '.el-icon-d-arrow-right:before',
  groups: undefined ]
arr: [ '.el-icon-minus:before',
  'minus',
  index: 0,
  input: '.el-icon-minus:before',
  groups: undefined ]
arr: [ '.el-icon-plus:before',
  'plus',
  index: 0,
  input: '.el-icon-plus:before',
  groups: undefined ]
arr: [ '.el-icon-remove:before',
  'remove',
  index: 0,
  input: '.el-icon-remove:before',
  groups: undefined ]
arr: [ '.el-icon-circle-plus:before',
  'circle-plus',
  index: 0,
  input: '.el-icon-circle-plus:before',
  groups: undefined ]
arr: [ '.el-icon-remove-outline:before',
  'remove-outline',
  index: 0,
  input: '.el-icon-remove-outline:before',
  groups: undefined ]
arr: [ '.el-icon-circle-plus-outline:before',
  'circle-plus-outline',
  index: 0,
  input: '.el-icon-circle-plus-outline:before',
  groups: undefined ]
arr: [ '.el-icon-close:before',
  'close',
  index: 0,
  input: '.el-icon-close:before',
  groups: undefined ]
arr: [ '.el-icon-check:before',
  'check',
  index: 0,
  input: '.el-icon-check:before',
  groups: undefined ]
arr: [ '.el-icon-circle-close:before',
  'circle-close',
  index: 0,
  input: '.el-icon-circle-close:before',
  groups: undefined ]
arr: [ '.el-icon-circle-check:before',
  'circle-check',
  index: 0,
  input: '.el-icon-circle-check:before',
  groups: undefined ]
arr: [ '.el-icon-circle-close-outline:before',
  'circle-close-outline',
  index: 0,
  input: '.el-icon-circle-close-outline:before',
  groups: undefined ]
arr: [ '.el-icon-circle-check-outline:before',
  'circle-check-outline',
  index: 0,
  input: '.el-icon-circle-check-outline:before',
  groups: undefined ]
arr: [ '.el-icon-zoom-out:before',
  'zoom-out',
  index: 0,
  input: '.el-icon-zoom-out:before',
  groups: undefined ]
arr: [ '.el-icon-zoom-in:before',
  'zoom-in',
  index: 0,
  input: '.el-icon-zoom-in:before',
  groups: undefined ]
arr: [ '.el-icon-d-caret:before',
  'd-caret',
  index: 0,
  input: '.el-icon-d-caret:before',
  groups: undefined ]
arr: [ '.el-icon-sort:before',
  'sort',
  index: 0,
  input: '.el-icon-sort:before',
  groups: undefined ]
arr: [ '.el-icon-sort-down:before',
  'sort-down',
  index: 0,
  input: '.el-icon-sort-down:before',
  groups: undefined ]
arr: [ '.el-icon-sort-up:before',
  'sort-up',
  index: 0,
  input: '.el-icon-sort-up:before',
  groups: undefined ]
arr: [ '.el-icon-tickets:before',
  'tickets',
  index: 0,
  input: '.el-icon-tickets:before',
  groups: undefined ]
arr: [ '.el-icon-document:before',
  'document',
  index: 0,
  input: '.el-icon-document:before',
  groups: undefined ]
arr: [ '.el-icon-goods:before',
  'goods',
  index: 0,
  input: '.el-icon-goods:before',
  groups: undefined ]
arr: [ '.el-icon-sold-out:before',
  'sold-out',
  index: 0,
  input: '.el-icon-sold-out:before',
  groups: undefined ]
arr: [ '.el-icon-news:before',
  'news',
  index: 0,
  input: '.el-icon-news:before',
  groups: undefined ]
arr: [ '.el-icon-message:before',
  'message',
  index: 0,
  input: '.el-icon-message:before',
  groups: undefined ]
arr: [ '.el-icon-date:before',
  'date',
  index: 0,
  input: '.el-icon-date:before',
  groups: undefined ]
arr: [ '.el-icon-printer:before',
  'printer',
  index: 0,
  input: '.el-icon-printer:before',
  groups: undefined ]
arr: [ '.el-icon-time:before',
  'time',
  index: 0,
  input: '.el-icon-time:before',
  groups: undefined ]
arr: [ '.el-icon-bell:before',
  'bell',
  index: 0,
  input: '.el-icon-bell:before',
  groups: undefined ]
arr: [ '.el-icon-mobile-phone:before',
  'mobile-phone',
  index: 0,
  input: '.el-icon-mobile-phone:before',
  groups: undefined ]
arr: [ '.el-icon-service:before',
  'service',
  index: 0,
  input: '.el-icon-service:before',
  groups: undefined ]
arr: [ '.el-icon-view:before',
  'view',
  index: 0,
  input: '.el-icon-view:before',
  groups: undefined ]
arr: [ '.el-icon-menu:before',
  'menu',
  index: 0,
  input: '.el-icon-menu:before',
  groups: undefined ]
arr: [ '.el-icon-more:before',
  'more',
  index: 0,
  input: '.el-icon-more:before',
  groups: undefined ]
arr: [ '.el-icon-more-outline:before',
  'more-outline',
  index: 0,
  input: '.el-icon-more-outline:before',
  groups: undefined ]
arr: [ '.el-icon-star-on:before',
  'star-on',
  index: 0,
  input: '.el-icon-star-on:before',
  groups: undefined ]
arr: [ '.el-icon-star-off:before',
  'star-off',
  index: 0,
  input: '.el-icon-star-off:before',
  groups: undefined ]
arr: [ '.el-icon-location:before',
  'location',
  index: 0,
  input: '.el-icon-location:before',
  groups: undefined ]
arr: [ '.el-icon-location-outline:before',
  'location-outline',
  index: 0,
  input: '.el-icon-location-outline:before',
  groups: undefined ]
arr: [ '.el-icon-phone:before',
  'phone',
  index: 0,
  input: '.el-icon-phone:before',
  groups: undefined ]
arr: [ '.el-icon-phone-outline:before',
  'phone-outline',
  index: 0,
  input: '.el-icon-phone-outline:before',
  groups: undefined ]
arr: [ '.el-icon-picture:before',
  'picture',
  index: 0,
  input: '.el-icon-picture:before',
  groups: undefined ]
arr: [ '.el-icon-picture-outline:before',
  'picture-outline',
  index: 0,
  input: '.el-icon-picture-outline:before',
  groups: undefined ]
arr: [ '.el-icon-delete:before',
  'delete',
  index: 0,
  input: '.el-icon-delete:before',
  groups: undefined ]
arr: [ '.el-icon-search:before',
  'search',
  index: 0,
  input: '.el-icon-search:before',
  groups: undefined ]
arr: [ '.el-icon-edit:before',
  'edit',
  index: 0,
  input: '.el-icon-edit:before',
  groups: undefined ]
arr: [ '.el-icon-edit-outline:before',
  'edit-outline',
  index: 0,
  input: '.el-icon-edit-outline:before',
  groups: undefined ]
arr: [ '.el-icon-rank:before',
  'rank',
  index: 0,
  input: '.el-icon-rank:before',
  groups: undefined ]
arr: [ '.el-icon-refresh:before',
  'refresh',
  index: 0,
  input: '.el-icon-refresh:before',
  groups: undefined ]
arr: [ '.el-icon-share:before',
  'share',
  index: 0,
  input: '.el-icon-share:before',
  groups: undefined ]
arr: [ '.el-icon-setting:before',
  'setting',
  index: 0,
  input: '.el-icon-setting:before',
  groups: undefined ]
arr: [ '.el-icon-upload:before',
  'upload',
  index: 0,
  input: '.el-icon-upload:before',
  groups: undefined ]
arr: [ '.el-icon-upload2:before',
  'upload2',
  index: 0,
  input: '.el-icon-upload2:before',
  groups: undefined ]
arr: [ '.el-icon-download:before',
  'download',
  index: 0,
  input: '.el-icon-download:before',
  groups: undefined ]
arr: [ '.el-icon-loading:before',
  'loading',
  index: 0,
  input: '.el-icon-loading:before',
  groups: undefined ]
arr: null
arr: null
arr: null
arr: null

[ 'info',
  'error',
  'success',
  'warning',
  'question',
  'back',
  'arrow-left',
  'arrow-down',
  'arrow-right',
  'arrow-up',
  'caret-left',
  'caret-bottom',
  'caret-top',
  'caret-right',
  'd-arrow-left',
  'd-arrow-right',
  'minus',
  'plus',
  'remove',
  'circle-plus',
  'remove-outline',
  'circle-plus-outline',
  'close',
  'check',
  'circle-close',
  'circle-check',
  'circle-close-outline',
  'circle-check-outline',
  'zoom-out',
  'zoom-in',
  'd-caret',
  'sort',
  'sort-down',
  'sort-up',
  'tickets',
  'document',
  'goods',
  'sold-out',
  'news',
  'message',
  'date',
  'printer',
  'time',
  'bell',
  'mobile-phone',
  'service',
  'view',
  'menu',
  'more',
  'more-outline',
  'star-on',
  'star-off',
  'location',
  'location-outline',
  'phone',
  'phone-outline',
  'picture',
  'picture-outline',
  'delete',
  'search',
  'edit',
  'edit-outline',
  'rank',
  'refresh',
  'share',
  'setting',
  'upload',
  'upload2',
  'download',
  'loading' ]

fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList), () => {
});

import _ from 'lodash';

function component () {
  var ele = document.createElement('div');
  ele.innerHTML = _.join(['Hello', 'webpack'], ' ')
  return ele;
}

document.body.appendChild(component())

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

export default function printMe() {
  console.log('I get called from print.js!');
}

export default function printMe() {
  // console.log('I get called from print.js!');
  cosnole.error('I get called from print.js!')
}

npm install --save-dev css-loader
npm install --save-dev ts-loader

div {
    background: red;
}

<book>
    <name>JavaScript</name>
    <content>It's a perfect book.</content>
</book>

reportHome
   ↓ 
addReport
   ↓ 添加一份报告到“亲友报告”
relativesAndFriendsReport
   ↓
reportContent
   ↓ 点“解绑”
relativesAndFriendsReport
   ↓ 点“返回”

this.$scope.$on('$stateChangeStart', (()=> {
      if (this.$window.sessionStorage.getItem('readyBackToReportHome') == 1 && this.$window.sessionStorage.getItem('from') == 6 ) {
        this.$state.go('reportHome'); //从“亲友报告”回到“我的报告”
      }
    }));

 RangeError: Maximum call stack size exceeded

this.emitStateChangeStartLimitCount = 1; //设置属性emitStateChangeStartLimitCount ，初始值为1
this.$scope.$on('$stateChangeStart', (()=> {
      if (this.$window.sessionStorage.getItem('readyBackToReportHome') == 1 && this.emitStateChangeStartLimitCount == 1 ) {
        this.emitStateChangeStartLimitCount--;
        this.$state.go('reportHome'); //从“亲友报告”回到“我的报告”
      }
    }));

reportHome
   ↓ 
addReport
   ↓ 添加一份报告到“亲友报告”
relativesAndFriendsReport
   ↓
reportContent
   ↓ 点“解绑”
relativesAndFriendsReport
   ↓ 点“返回”

this.emitStateChangeStartLimitCount = 1;
this.$scope.$on('$stateChangeStart', ((ev, toState, toParams, fromState)=> {
      this.$log.debug('亲友报告=4=');
      this.$log.debug('ev', ev); 
      this.$log.debug('toState', toState); 
      this.$log.debug('toParams', toParams); 
      this.$log.debug('fromState', fromState); 
      if (this.$window.sessionStorage.getItem('readyBackToReportHome') == 1 && this.emitStateChangeStartLimitCount == 1 ) {
        this.$log.debug('亲友报告=5=');
        this.emitStateChangeStartLimitCount--;
        toState.url='/report/reportHome';
        toState.templateUrl='app/mine/report/reportHome/reportHome.html';
        toState.controller='ReportHomeController';
        toState.controllerAs='reportHome';
        toState.name='reportHome';
        this.$state.go('reportHome'); //从“亲友报告”回到“我的报告”
      }
    }));

reportHome
   ↓ 
addReport
   ↓ 添加一份报告到“亲友报告”
relativesAndFriendsReport
   ↓
reportContent
   ↓ 点“解绑”
relativesAndFriendsReport
   ↓ 点“返回”

reportHome
   ↓ 
addReport
   ↓ 添加一份报告到“亲友报告”
relativesAndFriendsReport
   ↓ 
reportContent
   ↓ 点“解绑”
relativesAndFriendsReport
   ↓ 点“返回”
**页面实际跳转到了reportHome，
但是url中的state是reportContent**
   ↓ 点“亲友报告”
relativesAndFriendsReport
   ↓ 点“返回”
页面停留在relativesAndFriendsReport，
控制台报错“No such state 'reportHome'”，
url中state变为reportContent
   ↓ 点“返回”
页面停留在relativesAndFriendsReport，
控制台不报错，无反应，也不打印日志，
url中state变为relativesAndFriendsReport
   ↓ 点“返回”
页面实际跳转到“我的报告”页面，
但url中state变为addReport
   ↓ 点“添加报告”
页面无反应，
url中state是addReport
   ↓ 点“找回报告”
页面实际跳转到getBackReport，
控制台报错：“No such state 'reportHome'”，
url中state为addReport

http://uat.im-wechat.ikang.com/?code=001Lkxyn1H8SEl0KE7xn1i2Dyn1LkxyS&state=123#/report/reportContent

this.emitStateChangeStartLimitCount = 1;
this.$scope.$on('$stateChangeStart', ((ev, toState, toParams, fromState)=> {
      this.$log.debug('亲友报告=4=');
      this.$log.debug('ev', ev); // {name: "$stateChangeStart", targetScope: m, defaultPrevented: false, currentScope: m}
      this.$log.debug('toState', toState); //{url: "/report/reportHome", templateUrl: "app/mine/report/reportHome/reportHome.html", controller: "ReportHomeController", controllerAs: "reportHome", name: "reportHome"}
      this.$log.debug('toParams', toParams); // {}
      this.$log.debug('fromState', fromState); // {url: "/report/relativesAndFriendsReport", templateUrl: "app/mine/report/relativesAndFriendsReport/relativesAndFriendsReport.html", controller: "RelativesAndFriendsReportController", controllerAs: "relativesAndFriendsReport", name: "relativesAndFriendsReport"}
      if (this.$window.sessionStorage.getItem('readyBackToReportHome') == 1 && this.emitStateChangeStartLimitCount == 1 ) {
        this.$log.debug('亲友报告=5=');
        this.emitStateChangeStartLimitCount--;
        toState.url='/report/reportHome';
        toState.templateUrl='app/mine/report/reportHome/reportHome.html';
        toState.controller='ReportHomeController';
        toState.controllerAs='reportHome';
        toState.name='reportHome';
     ** var hrefArr = this.$window.location.href.split('#');
        this.$log.debug('hrefArr[0]: ', hrefArr[0]);
        this.$log.debug('hrefArr[1]: ', hrefArr[1]);
        this.$window.location.href = hrefArr[0] + '#' + '/report/reportHome'; //从“亲友报告”回到“我的报告” **
      }
    }));

$stateChangeStart被触发
   ↓ 
'亲友报告=4='
toSate: reportContent
   ↓ 
'亲友报告=5='
   ↓ 
'亲友报告=4='
toSate: reportHome

this.emitStateChangeStartLimitCount = 1;
this.$scope.$on('$stateChangeStart', ((ev, toState, toParams, fromState)=> {
      this.$log.debug('亲友报告=4=');
      this.$log.debug('ev', ev); // {name: "$stateChangeStart", targetScope: m, defaultPrevented: false, currentScope: m}
      this.$log.debug('toState', toState); //{url: "/report/reportHome", templateUrl: "app/mine/report/reportHome/reportHome.html", controller: "ReportHomeController", controllerAs: "reportHome", name: "reportHome"}
      this.$log.debug('toParams', toParams); // {}
      this.$log.debug('fromState', fromState); // {url: "/report/relativesAndFriendsReport", templateUrl: "app/mine/report/relativesAndFriendsReport/relativesAndFriendsReport.html", controller: "RelativesAndFriendsReportController", controllerAs: "relativesAndFriendsReport", name: "relativesAndFriendsReport"}
      if (this.$window.sessionStorage.getItem('readyBackToReportHome') == 1 && this.emitStateChangeStartLimitCount == 1 ) {
        this.$log.debug('亲友报告=5=');
        this.emitStateChangeStartLimitCount--;
     ** var hrefArr = this.$window.location.href.split('#');
        this.$log.debug('hrefArr[0]: ', hrefArr[0]);
        this.$log.debug('hrefArr[1]: ', hrefArr[1]);
        this.$window.location.href = hrefArr[0] + '#' + '/report/reportHome'; //从“亲友报告”回到“我的报告” **
      }
    }));

$stateChangeStart被触发
   ↓ 
'亲友报告=4='
toSate: reportContent
   ↓ 
'亲友报告=5='
   ↓ 
'亲友报告=4='
toSate: reportHome

this.globals.wechatParams.reloadAfterChangeSession = 'true';

this.emitStateChangeStartLimitCount = 1;
this.$scope.$on('$stateChangeStart', ((ev, toState, toParams, fromState)=> {
      this.$log.debug('亲友报告=4=');
      this.$log.debug('ev', ev); // {name: "$stateChangeStart", targetScope: m, defaultPrevented: false, currentScope: m}
      this.$log.debug('toState', toState); //{url: "/report/reportHome", templateUrl: "app/mine/report/reportHome/reportHome.html", controller: "ReportHomeController", controllerAs: "reportHome", name: "reportHome"}
      this.$log.debug('toParams', toParams); // {}
      this.$log.debug('fromState', fromState); // {url: "/report/relativesAndFriendsReport", templateUrl: "app/mine/report/relativesAndFriendsReport/relativesAndFriendsReport.html", controller: "RelativesAndFriendsReportController", controllerAs: "relativesAndFriendsReport", name: "relativesAndFriendsReport"}
      if (this.$window.sessionStorage.getItem('readyBackToReportHome') == 1 && this.emitStateChangeStartLimitCount == 1 && this.globals.wechatParams.reloadAfterChangeSession == 'false') {
        this.$log.debug('亲友报告=5=');
        this.emitStateChangeStartLimitCount--;
        var hrefArr = this.$window.location.href.split('#');
        this.$log.debug('hrefArr[0]: ', hrefArr[0]);
        this.$log.debug('hrefArr[1]: ', hrefArr[1]);
        this.$window.location.href = hrefArr[0] + '#' + '/report/reportHome'; //从“亲友报告”回到“我的报告”
      }
    }));

npm i mint-ui -S

# for Vue 1.x
npm i mint-ui@1 -S

import Vue from 'vue'
import Mint from 'mint-ui';

Vue.use(Mint);

import { Cell , Checklist } from 'mint-ui';

Vue.component( Cell.name , Cell );
Vue.component( Checklist.name , Checklist );

import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(Mint);

//import specified component

import MtRadio from 'mint-ui/lib/radio';
import 'mint-ui/lib/radio/style.css';

Vue.component( MtRadio.name , MtRadio );

npm i babel-plugin-component -D

{
    "plugins":["other-plugin",["component",[
        { "libraryName" : "mint-ui" , "style" : true }
    ]]]
}

npm run dev

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue create project-name

vue create demo01

cd demo01
npm run serve

npm install -g @vue/cli-init
# vue init now works exactly the same as [email protected]
vue init webpack my-project

 callpay() {
    if (typeof WeixinJSBridge == "undefined") { //eslint-disable-line no-undef, angular/module-getter, angular/di
      var self = this;
      if (this.$document[0].addEventListener) {
        this.$document[0].addEventListener('WeixinJSBridgeReady', self.jsApiCall, false);
      } else if (this.$document[0].attachEvent) {
        this.$document[0].attachEvent('WeixinJSBridgeReady', self.jsApiCall);
        this.$document[0].attachEvent('onWeixinJSBridgeReady', self.jsApiCall);
      }
    } else {
      this.jsApiCall();
    }
  }

  jsApiCall() {
    this.isLoading = false;
    var self = this;
    WeixinJSBridge.invoke( //eslint-disable-line no-undef, angular/module-getter, angular/di
      'getBrandWCPayRequest', {
        "appId": self.paramsObj.appId,     //公众号名称，由商户传入
        "timeStamp": self.paramsObj.timeStamp,         //时间戳，自1970年以来的秒数
        "nonceStr": self.paramsObj.nonceStr, //随机串
        "package": self.paramsObj.package,  // 订单详情扩展字符串，统一下单接口返回的prepay_id参数值，提交格式如：prepay_id=***
        "signType": self.paramsObj.signType,         //微信签名方式：
        "paySign": self.paramsObj.paySign //微信签名
      },
      function (res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") { // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
          self.$window.sessionStorage.setItem('payLeave', false);
          self.$state.go('paySuccess');
        }
      }
    );
  }

this.getSignData = {
        appCode: this.globals.appCode, // 'ikapp-web-dev'
        orderNum: this.orderNum,
        payType: 'WEIXIN',
        terminalType: 'H5',
        redirectUrl: encodeURIComponent(this.$window.location.protocol + '//' + this.$window.location.host + '/#/appointment/payStyle?H5Redirect=1')
      };

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

          wx.ready(function () {
            wx.checkJsApi({
              jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
              success: function () {
                // 以键值对的形式返回，可用的api值true，不可用为false
                // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
              }
            });
          });

wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

WeixinJSBridge.invoke( //eslint-disable-line no-undef, angular/module-getter, angular/di
      'getBrandWCPayRequest', {
        "appId": self.paramsObj.appId,     //公众号名称，由商户传入
        "timeStamp": self.paramsObj.timeStamp,         //时间戳，自1970年以来的秒数
        "nonceStr": self.paramsObj.nonceStr, //随机串
        "package": self.paramsObj.package,  // 订单详情扩展字符串，统一下单接口返回的prepay_id参数值，提交格式如：prepay_id=***
        "signType": self.paramsObj.signType,         //微信签名方式：
        "paySign": self.paramsObj.paySign //微信签名
      },
      function (res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") { // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
          self.$window.sessionStorage.setItem('payLeave', false);
          self.$state.go('paySuccess');
        }
      }
    );

npm install @vue/cli -g

vue create project-name

<template>
    <div class="count">
        <span @click="subtract">-</span>
        <span>{{num}}</span>
        <span @click="add">+</span>
    </div>
</template>

<script>
  export default {
    name: "Count",
    props: ['num'],
    methods: {
      subtract () {
        this.$emit('subtract')
      },
      add () {
        this.$emit('add')
      }
    }
  }
</script>

<style scoped>
    .count span {
        display: inline-block;
        width: 30px;
        height: 30px;
        background: darkgrey;
        text-align: center;
        line-height: 30px;
        margin-right: 10px;
    }

</style>

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <Count :num="num" @subtract="subtract" @add="add"></Count>
    </div>
</template>

<script>
  import Count from './components/Count.vue'

  export default {
    name: 'app',
    components: {
      Count
    },
    data () {
      return {
        num: 1
      }
    },
    methods: {
      subtract () {
        this.num = this.num - 1
      },
      add () {
        this.num = this.num + 1
      }
    }
  }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

import Vue from 'vue'
import Count from './Count'

const Components = {
  Count
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name])
});

export default Components;

vue-cli-service build --target lib --name vue-comps-01 ./src/components/index.js

npm run build:lib

npm publish --access public

npm install --save @yaoning/vue-comps-01

import '@yaoning/vue-comps-01'

npm install package-name@latest

npm view package-name versions

npm ls package-name

npm update package-name

let promise = someHttpRequest();
promise.then((res)=>{
    ...
});

chart.on('finished', function () {
    // chart渲染完成
});

this.myChart_01 = echarts.init(document.getElementById('myChart_01')); // echarts实例生成
let promise_chart_01 = new Promise((resolve, reject) => {
     this.myChart_01.on('finished', ()=> {
         // this.myChart_01渲染完成，此时应该改变这个 promise 的状态为 resolved
        resolve()
     });
});

this.myChart_01 = echarts.init(document.getElementById('myChart01')); // echarts实例生成
let promise_chart_01 = new Promise((resolve, reject) => {
     this.myChart_01.on('finished', ()=> {
         // this.myChart_01渲染完成，此时应该改变这个 promise 的状态为 resolved
        resolve()
     });
});
...
...
...
this.myChart_n = echarts.init(document.getElementById('myChart_n')); // echarts实例生成
let promise_chart_n = new Promise((resolve, reject) => {
     this.myChart_n.on('finished', ()=> {
         // this.myChart_n渲染完成，此时应该改变这个 promise 的状态为 resolved
        resolve()
     });
});

let pAll = Promise.all([promise_chart_01,promise_chart_02,......,promise_chart_n]);
pAll.then((res)=>{
    // 所有图表渲染完毕
    console.log(res); 
    // 去执行页面滚动
},(err)=>{
    // 有图表渲染失败 
})

let promises=[];
let promise_01 = xhrReq01();
promise_01.then((res) => {
  // 接口01调用成功
});
this.handleCreatePromise(promise_01)

let promise_02 = xhrReq02();
promise_02.then((res) => {
  // 接口02调用成功
});
this.handleCreatePromise(promise_02)

let promise_03 = xhrReq03();
promise_03.then((res) => {
  // 接口03调用成功
});
this.handleCreatePromise(promise_03)


handleCreatePromise(p) {
    promises.push(p);
    if(promises.length === 1) {
        // 显示loading
    }
    if(promises.length===3) { // 该页面的所有 xhr 请求promise都放进来了
        let pAll_xhr = Promise.all(promises);
        pAll_xhr.then((res) => {
            // 所有接口调用成功
            // 隐藏loading
        });
    }
}

import axios from 'axios'
import queryString from 'query-string'

export const getData = function(url = '', data = {}, type = 'post') {
    url = global.hostServe[getPrefix()] + '/dash_board' + url;
    if(type === 'get' && Object.keys(data).length){
       let query = queryString.stringify(data);
       url = url + '?' + query
   }

   return axios({
       method: type,
       url: url,
       data: data
   })
}


let xhr_promise = getData('/IncomeGrowthAndBudget', data);
xhr_promise.then((res) => {
   // 拿到 xhr 请求的响应 res
});

export const getData = function(url = '', data = {}, type = 'post') {
    ...

   return new Promise(( resolve , reject ) => {
       
   })
}

window.callback = function(response) {
    // 创建事件 'xhr_req_success'
    let xhrReqSuccessEvent = new CustomEvent('xhr_req_success', {
      detail:{
         res: response // 将 xhr 响应的值传给事件触发时的回调函数
      }
   });

   // 异步操作成功，触发window上的这个事件'xhr_req_success'
   window.dispatchEvent(xhrReqSuccessEvent)
}

export const getData = function(url = '', data = {}, type = 'post') {
    ...

   return new Promise(( resolve , reject ) => {
       window.iOSMethod(url,  data, type, callback); // 调 iOS 的方法iOSMethod，由 iOS 端发起 xhr 请求
       // 让 window 监听 'xhr_req_success'事件
       window.addEventListener('xhr_req_success', (event) => {
              // xhr 请求成功，应该执行resolve()方法，改变promise的状态
              // 响应的数据在 event.detail.res 中，通过 resolve 方法，传递给 promise的回调函数
             resolve(event.detail.res)
       });
   })
}

window.callback = function(response) {
   if(response && response.data && response.data.code === 200 && response.data.data) { // xhr 请求成功
       // 创建事件 'xhr_req_success'
       let xhrReqSuccessEvent = new CustomEvent('xhr_req_success', {
         detail:{
            res: response.data.data // 将 xhr 响应的值传给事件触发时的回调函数
         }
       });

       // 异步操作成功，触发window上的这个事件'xhr_req_success'
       window.dispatchEvent(xhrReqSuccessEvent)
   } else { // xhr 请求失败
       // 创建事件 'xhr_req_fail'
      let xhrReqFailEvent = new CustomEvent('xhr_req_fail',{
         detail:{ res: response.data }
      });

       // 异步操作失败，触发 window 上的这个事件 'xhr_req_fail'
      window.dispatchEvent(xhrReqFailEvent)
   }
    
}

export const getData = function(url = '', data = {}, type = 'post') {
    ...

   return new Promise(( resolve , reject ) => {
       window.iOSMethod(url,  data, type, callback); // 调 iOS 的方法iOSMethod，由 iOS 端发起 xhr 请求
       // 让 window 监听 'xhr_req_success'事件
       window.addEventListener('xhr_req_success', (event) => {
              // xhr 请求成功，应该执行resolve()方法，改变promise的状态
              // 响应的数据在 event.detail.res 中，通过 resolve 方法，传递给 promise的回调函数
             resolve(event.detail.res)
       });

       // 让 window 监听 'xhr_req_fail'事件
       window.addEventListener('xhr_req_fail', (event) => {
              //  xhr 请求失败，先给出 toast 提示
              Vue.$vux.toast.show({
                     type: 'cancel',
                     text: event.detail.res
              });
              //  执行reject()方法，改变promise的状态
              // 响应的数据在 event.detail.res 中，通过 reject 方法，传递给 promise的回调函数
             reject(event.detail.res);
       });
   })
}

window.callback = function(response) {
   let arr = response.data.url.split('/');
   let urlFlag = arr[arr.length-1]; // urlFlag 的值是接口名，例如：'GetCityCode'
   if(response && response.data && response.data.code === 200 && response.data.data) { // xhr 请求成功
       // 创建事件 'xhr_req_success'
       let xhrReqSuccessEvent = new CustomEvent('xhr_req_success' + urlFlag, {
         detail:{
            res: response.data.data // 将 xhr 响应的值传给事件触发时的回调函数
         }
       });

       // 异步操作成功，触发window上的这个事件'xhr_req_success'
       window.dispatchEvent(xhrReqSuccessEvent)
   } else { // xhr 请求失败
       // 创建事件 'xhr_req_fail'
      let xhrReqFailEvent = new CustomEvent('xhr_req_fail' + urlFlag,{
         detail:{ res: response.data }
      });

       // 异步操作失败，触发 window 上的这个事件 'xhr_req_fail'
      window.dispatchEvent(xhrReqFailEvent)
   }
    
}

export const getData = function(url = '', data = {}, type = 'post') {
    let urlFlag = url.slice(1); // 例如： 'GetCityCode'
    ...

   return new Promise(( resolve , reject ) => {
       window.iOSMethod(url,  data, type, callback); // 调 iOS 的方法iOSMethod，由 iOS 端发起 xhr 请求
       // 让 window 监听 'xhr_req_success'事件
       window.addEventListener('xhr_req_success' + urlFlag , (event) => {
              // xhr 请求成功，应该执行resolve()方法，改变promise的状态
              // 响应的数据在 event.detail.res 中，通过 resolve 方法，传递给 promise的回调函数
             resolve(event.detail.res)
       });

       // 让 window 监听 'xhr_req_fail'事件
       window.addEventListener('xhr_req_fail' + urlFlag, (event) => {
              //  xhr 请求失败，先给出 toast 提示
              Vue.$vux.toast.show({
                     type: 'cancel',
                     text: event.detail.res
              });
              //  执行reject()方法，改变promise的状态
              // 响应的数据在 event.detail.res 中，通过 reject 方法，传递给 promise的回调函数
             reject(event.detail.res);
       });
   })
}

window.callback = function (response) {
  console.log('response:', response)
  let arr = response.data.data.url.split('/');
  let urlFlag = arr[arr.length - 1];
  
  if (response && response.data && response.data.code === 200 && response.data.data) { // xhr 请求成功
    let xhrReqSuccessEvent = new CustomEvent('xhr_req_success_' + urlFlag, {
      detail: {res: response.data.data},
    });
    window.dispatchEvent(xhrReqSuccessEvent);
    window.removeEventListener('xhr_req_success_' + urlFlag, window['listener' + urlFlag + 'Success']);
    
  } else { // xhr 请求失败
    let xhrReqFailEvent = new CustomEvent('xhr_req_fail_' + urlFlag, {
      detail: {
        res: response.data
      },
    });
    window.dispatchEvent(xhrReqFailEvent);
    window.removeEventListener('xhr_req_fail_' + urlFlag, window['listener' + urlFlag + 'Fail']);
  }
  
};


export const getData = function (url = '', data = {}, type = 'post') {
  let urlFlag = url.slice(1);
  url = global.hostServe[getPrefix()] + '/dash_board' + url;
  
  if (type === 'get' && Object.keys(data).length) {
    let query = queryString.stringify(data);
    url = url + '?' + query
  }
  
  // if (window.navigator.userAgent.includes('iOS')) { // 在iOS APP中
  if (window.navigator.userAgent) { // 在iOS APP中
    return new Promise((resolve, reject) => {
      // window.iOSMethod(url, data, type, callback);
      setTimeout(() => {
        callback({
          data: {code: 200, data: {url: url}}
        })
      }, 2000);
      
      window['listener' + urlFlag + 'Success'] = function (event) {
        console.log('event.detail.res:', event.detail.res);
        resolve(event.detail.res)
      };
      window.addEventListener('xhr_req_success_' + urlFlag, window['listener' + urlFlag + 'Success']);
      
      
      window['listener' + urlFlag + 'Fail'] = function (event) {
        console.log('event.detail.res:', event.detail.res);
        Vue.$vux.toast.show({
          type: 'cancel',
          text: event.detail.res
          // text: event.detail.res.code + event.detail.res.message
        });
        reject(event.detail.res)
      };
      window.addEventListener('xhr_req_fail_' + urlFlag, window['listener' + urlFlag + 'Fail']);
    });
  } else {
    return axios({
      method: type,
      url: url,
      data: data
    })
  }
  
}

window.callback = function (signature, resiOS) {
  resiOS = JSON.parse(resiOS)
  
  if (resiOS && resiOS.status === 200 && resiOS.data) { // xhr 请求成功
    let xhrReqSuccessEvent = new CustomEvent('xhr_req_success_' + signature, {
      detail: {
        res: resiOS.data
      },
    });
    window.dispatchEvent(xhrReqSuccessEvent);
    window.removeEventListener('xhr_req_success_' + signature, window['listener' + signature + 'Success']);
  } else { // xhr 请求失败
    let xhrReqFailEvent = new CustomEvent('xhr_req_fail_' + signature, {
      detail: {
        res: resiOS
      },
    });
    window.dispatchEvent(xhrReqFailEvent);
    window.removeEventListener('xhr_req_fail_' + signature, window['listener' + signature + 'Fail']);
  }
};

export const getData = function (url = '', data = {}, type = 'post') {
  let signature = new Date().getTime(); // 时间戳，保证触发事件的唯一性
  let prefix = getPrefix();
  let urlNeedEncrypt = prefix === 'prod' ? 1 : 0;  // iOS端是否需要将url进行加密，1:需要（生产环境）；0:不需要（非生产环境）
  
  url = global.hostServe[prefix] + '/dash_board' + url;
  if (type === 'get' && Object.keys(data).length) {
    let query = queryString.stringify(data);
    url = url + '?' + query
  }
  
  if (window.navigator.userAgent.includes('XXXXiOS')) { // 在iOS APP中
    return new Promise((resolve, reject) => {
      let obj = {
        url: url,
        data: data,
        type: type,
        signature: signature,
        callback: 'callback',
        urlNeedEncrypt: urlNeedEncrypt
      };
      window.webkit.messageHandlers.ObjcCallback.postMessage(JSON.stringify(obj));
      
      window['listener' + signature + 'Success'] = function (event) {
        console.log('event.detail.res:', event.detail.res);
        resolve(event.detail.res)
      };
      window.addEventListener('xhr_req_success_' + signature, window['listener' + signature + 'Success']);
      
      
      window['listener' + signature + 'Fail'] = function (event) {
        console.log('event.detail.res:', event.detail.res);
        if (event.detail.res.message.includes('timed out')) {
          Vue.$vux.toast.show({
            type: 'cancel',
            text: '网络请求超时'
          });
        } else {
          Vue.$vux.toast.show({
            type: 'cancel',
            text: '请求失败'
          });
        }
        reject(event.detail.res)
      };
      window.addEventListener('xhr_req_fail_' + signature, window['listener' + signature + 'Fail']);
    });
  } else {
    return axios({
      method: type,
      url: url,
      data: data
    })
  }
}

window.callback = function (apiName, signature, resiOS) {
  // alert('signature:', signature)
  // alert('resiOS:', resiOS)
  resiOS = JSON.parse(resiOS)
  
  if (resiOS && resiOS.status === 200 && resiOS.data) { // xhr 请求成功
    let xhrReqSuccessEvent = new CustomEvent('xhr_req_success_' + apiName + signature, {
      detail: {
        res: resiOS.data
      },
    });
    window.dispatchEvent(xhrReqSuccessEvent);
    window.removeEventListener('xhr_req_success_' + apiName + signature, window['listener' + apiName + signature + 'Success']);
    
  } else { // xhr 请求失败
    let xhrReqFailEvent = new CustomEvent('xhr_req_fail_' + apiName + signature, {
      detail: {
        res: resiOS
      },
    });
    window.dispatchEvent(xhrReqFailEvent);
    window.removeEventListener('xhr_req_fail_' + apiName + signature, window['listener' + apiName + signature + 'Fail']);
  }
  
};

export const getData = function (url = '', data = {}, type = 'post') {
  if (window.navigator.userAgent.includes('iOS')) { // 在iOS APP中
    return new Promise((resolve, reject) => {
      let signature = new Date().getTime(); // 时间戳，保证触发事件的唯一性
      let apiName = url.slice(1, url.length);
      let obj = {
        url: apiName,
        data: data,
        type: type,
        signature: signature,
        callback: 'callback'
      };
      window.webkit.messageHandlers.ObjcCallback.postMessage(JSON.stringify(obj));
      
      window['listener' + apiName + signature + 'Success'] = function (event) {
        console.log('event.detail.res:', event.detail.res);
        resolve(event.detail.res)
      };
      window.addEventListener('xhr_req_success_' + apiName + signature, window['listener' + apiName + signature + 'Success']);
      
      
      window['listener' + apiName + signature + 'Fail'] = function (event) {
        console.log('event.detail.res:', event.detail.res);
        if (event.detail.res.message.includes('timed out')) {
          Vue.$vux.toast.show({
            type: 'cancel',
            text: '网络请求超时'
          });
        } else {
          Vue.$vux.toast.show({
            type: 'cancel',
            text: '请求失败'
          });
        }
        reject(event.detail.res)
      };
      window.addEventListener('xhr_req_fail_' + apiName + signature, window['listener' + apiName + signature + 'Fail']);
      
      // alert('发起 signature：' + signature);
    });
  }
  // H5 本地开发时将下面的注释打开
  else {
    let prefix = getPrefix();
    url = global.hostServe[prefix] + '/dash_board' + url;
    if (type === 'get' && Object.keys(data).length) {
      let query = queryString.stringify(data);
      url = url + '?' + query
    }

    return axios({
      method: type,
      url: url,
      data: data
    })
  }
}

var Components = require('../../components.json');
var fs = require('fs');
var render = require('json-templater/string');
var uppercamelcase = require('uppercamelcase');
var path = require('path');
var endOfLine = require('os').EOL;

var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
var INSTALL_COMPONENT_TEMPLATE = '  {{name}}';
var MAIN_TEMPLATE = `/* Automatically generated by './build/bin/build-entry.js' */

{{include}}
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';

const components = [
{{install}},
  CollapseTransition
];

const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);

  components.forEach(component => {
    Vue.component(component.name, component);
  });

  Vue.use(Loading.directive);

  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };

  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;

};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

module.exports = {
  version: '{{version}}',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
{{list}}
};

module.exports.default = module.exports;
`;

delete Components.font;

var ComponentNames = Object.keys(Components);

var includeComponentTemplate = [];
var installTemplate = [];
var listTemplate = [];

ComponentNames.forEach(name => {
  var componentName = uppercamelcase(name);
  
  includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
    name: componentName,
    package: name
  }));
  
  if (['Loading', 'MessageBox', 'Notification', 'Message'].indexOf(componentName) === -1) {
    installTemplate.push(render(INSTALL_COMPONENT_TEMPLATE, {
      name: componentName,
      component: name
    }));
  }
  
  if (componentName !== 'Loading') listTemplate.push(`  ${componentName}`);
});

var template = render(MAIN_TEMPLATE, {
  include: includeComponentTemplate.join(endOfLine),
  install: installTemplate.join(',' + endOfLine),
  version: process.env.VERSION || require('../../package.json').version,
  list: listTemplate.join(',' + endOfLine)
});

fs.writeFileSync(OUTPUT_PATH, template);
console.log('[build entry] DONE:', OUTPUT_PATH);

{
  "pagination": "./packages/pagination/index.js",
  "dialog": "./packages/dialog/index.js",
 ...
 ...
 ...
  "header": "./packages/header/index.js",
  "aside": "./packages/aside/index.js",
  "main": "./packages/main/index.js",
  "footer": "./packages/footer/index.js"
}

var render = require('json-templater/string');

var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
render(IMPORT_TEMPLATE, {
    name: 'Pagination',
    package: 'pagination'
  })  // =>  import Pagination from '../packages/pagination/index.js'

var uppercamelcase = require('uppercamelcase');

uppercamelcase('pagination') // => 'Pagination'
uppercamelcase('dropdown-menu') // => 'DropdownMenu'

var endOfLine = require('os').EOL;

var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');

var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';

var INSTALL_COMPONENT_TEMPLATE = '  {{name}}';

var MAIN_TEMPLATE = `/* Automatically generated by './build/bin/build-entry.js' */

{{include}}
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';

const components = [
{{install}},
  CollapseTransition
];

const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);

  components.forEach(component => {
    Vue.component(component.name, component);
  });

  Vue.use(Loading.directive);

  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };

  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;

};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

module.exports = {
  version: '{{version}}',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
{{list}}
};

module.exports.default = module.exports;
`;

var ComponentNames = Object.keys(Components);

 [ 'pagination',
  'dialog',
  'autocomplete',
  'dropdown',
  'dropdown-menu',
  'dropdown-item',
  'menu',
  'submenu',
  'menu-item',
  'menu-item-group',
  'input',
  'input-number',
  'radio',
  'radio-group',
  'radio-button',
  'checkbox',
  'checkbox-button',
  'checkbox-group',
  'switch',
  'select',
  'option',
  'option-group',
  'button',
  'button-group',
  'table',
  'table-column',
  'date-picker',
  'time-select',
  'time-picker',
  'popover',
  'tooltip',
  'message-box',
  'breadcrumb',
  'breadcrumb-item',
  'form',
  'form-item',
  'tabs',
  'tab-pane',
  'tag',
  'tree',
  'alert',
  'notification',
  'slider',
  'loading',
  'icon',
  'row',
  'col',
  'upload',
  'progress',
  'spinner',
  'message',
  'badge',
  'card',
  'rate',
  'steps',
  'step',
  'carousel',
  'scrollbar',
  'carousel-item',
  'collapse',
  'collapse-item',
  'cascader',
  'color-picker',
  'transfer',
  'container',
  'header',
  'aside',
  'main',
  'footer' ]

[ 'import Pagination from \'../packages/pagination/index.js\';',
  'import Dialog from \'../packages/dialog/index.js\';',
  'import Autocomplete from \'../packages/autocomplete/index.js\';',
  'import Dropdown from \'../packages/dropdown/index.js\';',
  'import DropdownMenu from \'../packages/dropdown-menu/index.js\';',
  'import DropdownItem from \'../packages/dropdown-item/index.js\';',
  'import Menu from \'../packages/menu/index.js\';',
  'import Submenu from \'../packages/submenu/index.js\';',
  'import MenuItem from \'../packages/menu-item/index.js\';',
  'import MenuItemGroup from \'../packages/menu-item-group/index.js\';',
  'import Input from \'../packages/input/index.js\';',
  'import InputNumber from \'../packages/input-number/index.js\';',
  'import Radio from \'../packages/radio/index.js\';',
  'import RadioGroup from \'../packages/radio-group/index.js\';',
  'import RadioButton from \'../packages/radio-button/index.js\';',
  'import Checkbox from \'../packages/checkbox/index.js\';',
  'import CheckboxButton from \'../packages/checkbox-button/index.js\';',
  'import CheckboxGroup from \'../packages/checkbox-group/index.js\';',
  'import Switch from \'../packages/switch/index.js\';',
  'import Select from \'../packages/select/index.js\';',
  'import Option from \'../packages/option/index.js\';',
  'import OptionGroup from \'../packages/option-group/index.js\';',
  'import Button from \'../packages/button/index.js\';',
  'import ButtonGroup from \'../packages/button-group/index.js\';',
  'import Table from \'../packages/table/index.js\';',
  'import TableColumn from \'../packages/table-column/index.js\';',
  'import DatePicker from \'../packages/date-picker/index.js\';',
  'import TimeSelect from \'../packages/time-select/index.js\';',
  'import TimePicker from \'../packages/time-picker/index.js\';',
  'import Popover from \'../packages/popover/index.js\';',
  'import Tooltip from \'../packages/tooltip/index.js\';',
  'import MessageBox from \'../packages/message-box/index.js\';',
  'import Breadcrumb from \'../packages/breadcrumb/index.js\';',
  'import BreadcrumbItem from \'../packages/breadcrumb-item/index.js\';',
  'import Form from \'../packages/form/index.js\';',
  'import FormItem from \'../packages/form-item/index.js\';',
  'import Tabs from \'../packages/tabs/index.js\';',
  'import TabPane from \'../packages/tab-pane/index.js\';',
  'import Tag from \'../packages/tag/index.js\';',
  'import Tree from \'../packages/tree/index.js\';',
  'import Alert from \'../packages/alert/index.js\';',
  'import Notification from \'../packages/notification/index.js\';',
  'import Slider from \'../packages/slider/index.js\';',
  'import Loading from \'../packages/loading/index.js\';',
  'import Icon from \'../packages/icon/index.js\';',
  'import Row from \'../packages/row/index.js\';',
  'import Col from \'../packages/col/index.js\';',
  'import Upload from \'../packages/upload/index.js\';',
  'import Progress from \'../packages/progress/index.js\';',
  'import Spinner from \'../packages/spinner/index.js\';',
  'import Message from \'../packages/message/index.js\';',
  'import Badge from \'../packages/badge/index.js\';',
  'import Card from \'../packages/card/index.js\';',
  'import Rate from \'../packages/rate/index.js\';',
  'import Steps from \'../packages/steps/index.js\';',
  'import Step from \'../packages/step/index.js\';',
  'import Carousel from \'../packages/carousel/index.js\';',
  'import Scrollbar from \'../packages/scrollbar/index.js\';',
  'import CarouselItem from \'../packages/carousel-item/index.js\';',
  'import Collapse from \'../packages/collapse/index.js\';',
  'import CollapseItem from \'../packages/collapse-item/index.js\';',
  'import Cascader from \'../packages/cascader/index.js\';',
  'import ColorPicker from \'../packages/color-picker/index.js\';',
  'import Transfer from \'../packages/transfer/index.js\';',
  'import Container from \'../packages/container/index.js\';',
  'import Header from \'../packages/header/index.js\';',
  'import Aside from \'../packages/aside/index.js\';',
  'import Main from \'../packages/main/index.js\';',
  'import Footer from \'../packages/footer/index.js\';' ]

[ '  Pagination',
  '  Dialog',
  '  Autocomplete',
  '  Dropdown',
  '  DropdownMenu',
  '  DropdownItem',
  '  Menu',
  '  Submenu',
  '  MenuItem',
  '  MenuItemGroup',
  '  Input',
  '  InputNumber',
  '  Radio',
  '  RadioGroup',
  '  RadioButton',
  '  Checkbox',
  '  CheckboxButton',
  '  CheckboxGroup',
  '  Switch',
  '  Select',
  '  Option',
  '  OptionGroup',
  '  Button',
  '  ButtonGroup',
  '  Table',
  '  TableColumn',
  '  DatePicker',
  '  TimeSelect',
  '  TimePicker',
  '  Popover',
  '  Tooltip',
  '  Breadcrumb',
  '  BreadcrumbItem',
  '  Form',
  '  FormItem',
  '  Tabs',
  '  TabPane',
  '  Tag',
  '  Tree',
  '  Alert',
  '  Slider',
  '  Icon',
  '  Row',
  '  Col',
  '  Upload',
  '  Progress',
  '  Spinner',
  '  Badge',
  '  Card',
  '  Rate',
  '  Steps',
  '  Step',
  '  Carousel',
  '  Scrollbar',
  '  CarouselItem',
  '  Collapse',
  '  CollapseItem',
  '  Cascader',
  '  ColorPicker',
  '  Transfer',
  '  Container',
  '  Header',
  '  Aside',
  '  Main',
  '  Footer' ]

[ '  Pagination',
  '  Dialog',
  '  Autocomplete',
  '  Dropdown',
  '  DropdownMenu',
  '  DropdownItem',
  '  Menu',
  '  Submenu',
  '  MenuItem',
  '  MenuItemGroup',
  '  Input',
  '  InputNumber',
  '  Radio',
  '  RadioGroup',
  '  RadioButton',
  '  Checkbox',
  '  CheckboxButton',
  '  CheckboxGroup',
  '  Switch',
  '  Select',
  '  Option',
  '  OptionGroup',
  '  Button',
  '  ButtonGroup',
  '  Table',
  '  TableColumn',
  '  DatePicker',
  '  TimeSelect',
  '  TimePicker',
  '  Popover',
  '  Tooltip',
  '  MessageBox',
  '  Breadcrumb',
  '  BreadcrumbItem',
  '  Form',
  '  FormItem',
  '  Tabs',
  '  TabPane',
  '  Tag',
  '  Tree',
  '  Alert',
  '  Notification',
  '  Slider',
  '  Icon',
  '  Row',
  '  Col',
  '  Upload',
  '  Progress',
  '  Spinner',
  '  Message',
  '  Badge',
  '  Card',
  '  Rate',
  '  Steps',
  '  Step',
  '  Carousel',
  '  Scrollbar',
  '  CarouselItem',
  '  Collapse',
  '  CollapseItem',
  '  Cascader',
  '  ColorPicker',
  '  Transfer',
  '  Container',
  '  Header',
  '  Aside',
  '  Main',
  '  Footer' ]

var template = render(MAIN_TEMPLATE, {
  include: includeComponentTemplate.join(endOfLine),
  install: installTemplate.join(',' + endOfLine),
  version: process.env.VERSION || require('../../package.json').version,
  list: listTemplate.join(',' + endOfLine)
});

fs.writeFileSync(OUTPUT_PATH, template);

/* Automatically generated by './build/bin/build-entry.js' */

import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js';
import Autocomplete from '../packages/autocomplete/index.js';
import Dropdown from '../packages/dropdown/index.js';
import DropdownMenu from '../packages/dropdown-menu/index.js';
import DropdownItem from '../packages/dropdown-item/index.js';
import Menu from '../packages/menu/index.js';
import Submenu from '../packages/submenu/index.js';
import MenuItem from '../packages/menu-item/index.js';
import MenuItemGroup from '../packages/menu-item-group/index.js';
import Input from '../packages/input/index.js';
import InputNumber from '../packages/input-number/index.js';
import Radio from '../packages/radio/index.js';
import RadioGroup from '../packages/radio-group/index.js';
import RadioButton from '../packages/radio-button/index.js';
import Checkbox from '../packages/checkbox/index.js';
import CheckboxButton from '../packages/checkbox-button/index.js';
import CheckboxGroup from '../packages/checkbox-group/index.js';
import Switch from '../packages/switch/index.js';
import Select from '../packages/select/index.js';
import Option from '../packages/option/index.js';
import OptionGroup from '../packages/option-group/index.js';
import Button from '../packages/button/index.js';
import ButtonGroup from '../packages/button-group/index.js';
import Table from '../packages/table/index.js';
import TableColumn from '../packages/table-column/index.js';
import DatePicker from '../packages/date-picker/index.js';
import TimeSelect from '../packages/time-select/index.js';
import TimePicker from '../packages/time-picker/index.js';
import Popover from '../packages/popover/index.js';
import Tooltip from '../packages/tooltip/index.js';
import MessageBox from '../packages/message-box/index.js';
import Breadcrumb from '../packages/breadcrumb/index.js';
import BreadcrumbItem from '../packages/breadcrumb-item/index.js';
import Form from '../packages/form/index.js';
import FormItem from '../packages/form-item/index.js';
import Tabs from '../packages/tabs/index.js';
import TabPane from '../packages/tab-pane/index.js';
import Tag from '../packages/tag/index.js';
import Tree from '../packages/tree/index.js';
import Alert from '../packages/alert/index.js';
import Notification from '../packages/notification/index.js';
import Slider from '../packages/slider/index.js';
import Loading from '../packages/loading/index.js';
import Icon from '../packages/icon/index.js';
import Row from '../packages/row/index.js';
import Col from '../packages/col/index.js';
import Upload from '../packages/upload/index.js';
import Progress from '../packages/progress/index.js';
import Spinner from '../packages/spinner/index.js';
import Message from '../packages/message/index.js';
import Badge from '../packages/badge/index.js';
import Card from '../packages/card/index.js';
import Rate from '../packages/rate/index.js';
import Steps from '../packages/steps/index.js';
import Step from '../packages/step/index.js';
import Carousel from '../packages/carousel/index.js';
import Scrollbar from '../packages/scrollbar/index.js';
import CarouselItem from '../packages/carousel-item/index.js';
import Collapse from '../packages/collapse/index.js';
import CollapseItem from '../packages/collapse-item/index.js';
import Cascader from '../packages/cascader/index.js';
import ColorPicker from '../packages/color-picker/index.js';
import Transfer from '../packages/transfer/index.js';
import Container from '../packages/container/index.js';
import Header from '../packages/header/index.js';
import Aside from '../packages/aside/index.js';
import Main from '../packages/main/index.js';
import Footer from '../packages/footer/index.js';
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';

const components = [
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  Scrollbar,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  CollapseTransition
];

const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);

  components.forEach(component => {
    Vue.component(component.name, component);
  });

  Vue.use(Loading.directive);

  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };

  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;

};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

module.exports = {
  version: '2.4.11',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  MessageBox,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Notification,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Message,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  Scrollbar,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer
};

module.exports.default = module.exports;

cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js

$ BABEL_ENV=production [COMMAND]
$ NODE_ENV=production [COMMAND]

$ SET BABEL_ENV=production
$ [COMMAND]

注意：[COMMAND] 指的是任意一个用来运行 Babel 的命令（如：babel，babel-node，或是 node，如果你使用了 register 钩子的话）。

提示：如果你想要让命令能够跨 unix 和 windows 平台运行的话，可以使用 cross-env。

npx babel src --out-dir lib

npx babel src --out-dir lib --ignore "src/**/*.spec.js","src/**/*.test.js"

<script type=”text/javascript”>
	function sayHi(){
		alert(“Hi!”);
        }
</script>

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
    <script type="text/javascript" defer="defer" src="example1.js"></script>
    <script type="text/javascript" defer="defer" src="example2.js"></script>
  </head>
  <body>
    <!-- 这里放内容 -->
  </body>
</html>

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

.
├── build/                      # webpack config files
│   └── ...
├── config/                     
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .editorconfig.js            # editor config
├── .eslintrc.js                # eslint config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

npm install sass-loader node-sass --save-dev

<style lang="scss">
/* write SASS! */
</style>

// build/webpack.base.conf.js
module.exports = {
  // ...
  vue: {
    postcss: [/* your plugins */]
  }
}

<!-- App.vue -->
<style src="./styles/global.less" lang="less"></style>

computed: {
  background () {
    return require('./bgs/' + this.id + '.jpg')
  }
}

// config.js
module.exports = {
  // ...
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

// config/prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  DEBUG_MODE: false,
  API_KEY: '"..."' // this is shared between all environments
}

// config/dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  DEBUG_MODE: true // this overrides the DEBUG_MODE value of prod.env
})

// config/test.env.js
module.exports = merge(devEnv, {
  NODE_ENV: '"testing"'
})

Vue.config.debug = process.env.DEBUG_MODE

var path = require('path')

module.exports = {
  build: {
    index: path.resolve(__dirname, 'dist/index.html'),
    assetsRoot: path.resolve(__dirname, 'dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true
  },
  dev: {
    port: 8080,
    proxyTable: {}
  }
}

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

// This line should go at the top of the file where other 'imports' live in
// 这一行应该在其他'imports'所在的文件的最顶部运行
var PrerenderSpaPlugin = require('prerender-spa-plugin')

new PrerenderSpaPlugin(
  // Path to compiled app
  path.join(__dirname, '../dist'),
  // List of endpoints you wish to prerender
  [ '/' ]
)

<style scoped lang="scss" rel="stylesheet/scss">

<body ng-app="myapp">
    <div ng-controller="HelloCtrl">
        say hello to:
        <input type="text" ng-model="name">
        <h1>Hello,{{name}}!</h1>
    </div>
</body>

<script>
var app = angular.module('myapp', []);
app.controller('HelloCtrl', function($scope) {
    $scope.name = 'world';
});
</script>

<body ng-app="myapp">
    <div ng-controller="HelloCtrl">
        say hello to:
        <input type="text" ng-model="name">
        <h1>Hello,{{getName()}}!</h1>
    </div>
</body>
<script>
var app = angular.module('myapp', []);
app.controller('HelloCtrl', function($scope) {
    $scope.getName = function() {
        return $scope.name;
    };
});
</script>

<body ng-app="myapp">
    <ul ng-controller="WorldCtrl">
        <li ng-repeat="country in countries">
            {{country.name}} has population of {{country.population}}
        </li>
        <hr> World's population:{{population}} millions
    </ul>
</body>

<script>
var app = angular.module('myapp', []);
app.controller('WorldCtrl', function($scope) {
    $scope.population = 7000;
    $scope.countries = [{
        name: 'France',
        population: 63.1
    }, {
        name: 'United Kingdom',
        population: 61.8
    }];
});
</script>

//    filename: foo.js
define(['jquery'], function ($) {
    //    methods
    function myFunc(){};

    //    exposed public methods
    return myFunc;
});

//    filename: foo.js
define(['jquery', 'underscore'], function ($, _) {
    //    methods
    function a(){};    //    private because it's not returned (see below)
    function b(){};    //    public because it's returned
    function c(){};    //    public because it's returned

    //    exposed public methods
    return {
        b: b,
        c: c
    }
});

define(function (require, exports, module) {
    // load dependence
    var $ = require('jquery');
    
    //    methods
    function myFunc(){};

    //    exposed public methods
    return myFunc;
})

define(function (requie, exports, module) {
    // 依赖可以就近书写
    var a = require('./a');
    a.test();
    
    // ...
    // 软依赖
    if (status) {
        var b = requie('./b');
        b.test();
    }
});

//    filename: foo.js

//    dependencies
var $ = require('jquery');

//    methods
function myFunc(){};

//    exposed public method (single)
module.exports = myFunc;

//    filename: foo.js
var $ = require('jquery');
var _ = require('underscore');

//    methods
function a(){};    //    private because it's omitted from module.exports (see below)
function b(){};    //    public because it's defined in module.exports
function c(){};    //    public because it's defined in module.exports

//    exposed public methods
module.exports = {
    b: b,
    c: c
};

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //    methods
    function myFunc(){};

    //    exposed public method
    return myFunc;
}));

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory(require('jquery'), require('underscore'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery, root._);
    }
}(this, function ($, _) {
    //    methods
    function a(){};    //    private because it's not returned (see below)
    function b(){};    //    public because it's returned
    function c(){};    //    public because it's returned

    //    exposed public methods
    return {
        b: b,
        c: c
    }
}));

// CommonJS模块
let { stat, exists, readFile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

// ES6模块
import { stat, exists, readFile } from 'fs';

export default 42;

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(["exports"], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports);
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports);
    global.actual = mod.exports;
  }
})(this, function (exports) {
  "use strict";

  Object.defineProperty(exports, "__esModule", {
    value: true
  });

  exports.default = 42;
});

npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm i -g create-react-app

var fs = require('fs');
var path = require('path');
var Components = require('../../components.json');
var themes = [
  'theme-chalk'
];
Components = Object.keys(Components);
var basepath = path.resolve(__dirname, '../../packages/');

function fileExists (filePath) {
  try {
    return fs.statSync(filePath).isFile();
  } catch (err) {
    return false;
  }
}

themes.forEach((theme) => {
  var isSCSS = theme !== 'theme-default';
  var indexContent = isSCSS ? '@import "./base.scss";\n' : '@import "./base.css";\n';
  Components.forEach(function (key) {
    if (['icon', 'option', 'option-group'].indexOf(key) > -1) return;
    var fileName = key + (isSCSS ? '.scss' : '.css');
    indexContent += '@import "./' + fileName + '";\n';
    var filePath = path.resolve(basepath, theme, 'src', fileName);
    if (!fileExists(filePath)) {
      fs.writeFileSync(filePath, '', 'utf8');
      console.log(theme, ' 创建遗漏的 ', fileName, ' 文件');
    }
  });
  fs.writeFileSync(path.resolve(basepath, theme, 'src', isSCSS ? 'index.scss' : 'index.css'), indexContent);
});

@import "./base.scss";
@import "./pagination.scss";
@import "./dialog.scss";
@import "./autocomplete.scss";
@import "./dropdown.scss";
@import "./dropdown-menu.scss";
@import "./dropdown-item.scss";
@import "./menu.scss";
@import "./submenu.scss";
@import "./menu-item.scss";
@import "./menu-item-group.scss";
@import "./input.scss";
@import "./input-number.scss";
@import "./radio.scss";
@import "./radio-group.scss";
@import "./radio-button.scss";
@import "./checkbox.scss";
@import "./checkbox-button.scss";
@import "./checkbox-group.scss";
@import "./switch.scss";
@import "./select.scss";
@import "./button.scss";
@import "./button-group.scss";
@import "./table.scss";
@import "./table-column.scss";
@import "./date-picker.scss";
@import "./time-select.scss";
@import "./time-picker.scss";
@import "./popover.scss";
@import "./tooltip.scss";
@import "./message-box.scss";
@import "./breadcrumb.scss";
@import "./breadcrumb-item.scss";
@import "./form.scss";
@import "./form-item.scss";
@import "./tabs.scss";
@import "./tab-pane.scss";
@import "./tag.scss";
@import "./tree.scss";
@import "./alert.scss";
@import "./notification.scss";
@import "./slider.scss";
@import "./loading.scss";
@import "./row.scss";
@import "./col.scss";
@import "./upload.scss";
@import "./progress.scss";
@import "./spinner.scss";
@import "./message.scss";
@import "./badge.scss";
@import "./card.scss";
@import "./rate.scss";
@import "./steps.scss";
@import "./step.scss";
@import "./carousel.scss";
@import "./scrollbar.scss";
@import "./carousel-item.scss";
@import "./collapse.scss";
@import "./collapse-item.scss";
@import "./cascader.scss";
@import "./color-picker.scss";
@import "./transfer.scss";
@import "./container.scss";
@import "./header.scss";
@import "./aside.scss";
@import "./main.scss";
@import "./footer.scss";

<input type="file"
             name="file"
             id="uploadFile"
             accept="image/*;capture=camera"
             multiple="multiple"
             input-on-change
             style="visibility: hidden;">

export function InputOnChangeDirective() {
  'ngInject';
  let directive = {
    restrict: 'A',
    controller: InputOnChangeController,
    controllerAs: 'inputOnChange',
    link: function (scope, element) {
      element.bind('change', function () {
        scope.rediagnosisApply.handleImages();
      });
    }
  };
  return directive;
}
class InputOnChangeController {
  constructor($timeout, $log, $rootScope, $scope, $location, toastr) {
    'ngInject';
    this.$timeout = $timeout;
    this.$log = $log;
    this.$rootScope = $rootScope;
    this.$scope = $scope;
    this.$location = $location;
    this.toastr = toastr;
  }
}

// input的change事件触发
  handleImages() {
    var self = this;
    var files = this.$document[0].querySelector('input[name="file"]').files;

    // 1、判断这一次选择的文件中有没有非图片，如果有，返回函数，什么都不做
    for (var i = 0; i < files.length; i++) {
      if (!/image\/\w+/.test(files[i].type)) {
        this.toastr.warning(files[i].name + "不是图片！请重新选择！");
        return;
      }
    }

    // 2、限制图片上传数量
    if (files.length > 9 || this.files.length + files.length > 9) {
      this.toastr.warning('最多可上传9张图片，请重新选择！');
      return;
    }

    // 3、判断新增的每一张图片是不是已经选择过的，如果没有选择过，push到filesNoRepeat数组中
    var filesNoRepeat = [];
    for (var k1 = 0; k1 < files.length; k1++) {
      var flag = true;
      for (var k2 = 0; k2 < this.files.length; k2++) {
        if (files[k1].lastModified == this.files[k2].lastModified && files[k1].name == this.files[k2].name && files[k1].size == this.files[k2].size) {
          // 认为是选择过的图片
          flag = false;
          // this.toastr.warning(files[k1].name + '已经添加过');
          break;
        }
      }
      if (flag) {
        filesNoRepeat.push(files[k1]);
      }
    }

    // 4、预览图片
    for (var k3 = 0; k3 < filesNoRepeat.length; k3++) {
      var reader = new FileReader();
      reader.readAsDataURL(filesNoRepeat[k3]);
      reader.onload = function () {
        self.imgsURL.push(this.result);
        self.$scope.$apply();
      };
      reader.onerror = function () {
        self.toastr.warning('图片读取失败');
      };
      reader.onabort = function () {
        self.toastr.warning('图片读取被中止');
      };

      // 更新this.files
      this.files.push(filesNoRepeat[k3]);
    }

  }

npx create-react-app my-app
cd my-app
npm start

create-react-app my-app

npm install create-react-app -g
create-react-app my-app

npm init react-app my-app

yarn create react-app my-app

 cp-cli packages/theme-chalk/lib lib/theme-chalk

var fs = require('fs');
var path = require('path');
var version = process.env.VERSION || require('../../package.json').version;
var content = {'1.4.13': '1.4', '2.0.11': '2.0', '2.1.0': '2.1', '2.2.2': '2.2', '2.3.9': '2.3'};
if (!content[version]) content[version] = '2.4';
fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));

{
'1.4.13': '1.4',
 '2.0.11': '2.0', 
'2.1.0': '2.1', 
'2.2.2': '2.2', 
'2.3.9': '2.3',
'2.4.11':'2.4'
}

node build/bin/build-locale.js

var fs = require('fs');
var save = require('file-save');
var resolve = require('path').resolve;
var basename = require('path').basename;
var localePath = resolve(__dirname, '../../src/locale/lang');
var fileList = fs.readdirSync(localePath);

var transform = function (filename, name, cb) {
  require('babel-core').transformFile(resolve(localePath, filename), {
    plugins: [
      'add-module-exports',
      ['transform-es2015-modules-umd', {loose: true}]
    ],
    moduleId: name
  }, cb);
};

fileList
  .filter(function (file) {
    return /\.js$/.test(file);
  })
  .forEach(function (file) {
    var name = basename(file, '.js');
    
    transform(file, name, function (err, result) {
      if (err) {
        console.error(err);
      } else {
        var code = result.code;
        
        code = code
          .replace('define(\'', 'define(\'element/locale/')
          .replace('global.', 'global.ELEMENT.lang = global.ELEMENT.lang || {}; \n    global.ELEMENT.lang.');
        save(resolve(__dirname, '../../lib/umd/locale', file)).write(code);
        
        console.log(file);
      }
    });
  });

var save = require('file-save');

path.resolve()

path.basename()

path.basename('/foo/bar/baz/asdf/quux.html');
// Returns: 'quux.html'

path.basename('/foo/bar/baz/asdf/quux.html', '.html');
// Returns: 'quux'

[ 'af-ZA.js',
  'ar.js',
  'bg.js',
 ...
  'zh-CN.js',
  'zh-TW.js' ]

babel.transformFile(filename: string, options?: Object, callback: Function)

babel.transformFile("filename.js", options, function (err, result) {
  result; // => { code, map, ast }
});

'use strict';

var fs = require('fs');
var path = require('path');
var langConfig = require('../../examples/i18n/page.json');

langConfig.forEach(lang => {
  try {
    fs.statSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));
  } catch (e) {
    fs.mkdirSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));
  }
  
  Object.keys(lang.pages).forEach(page => {
    var templatePath = path.resolve(__dirname, `../../examples/pages/template/${ page }.tpl`);
    var outputPath = path.resolve(__dirname, `../../examples/pages/${ lang.lang }/${ page }.vue`);
    var content = fs.readFileSync(templatePath, 'utf8');
    var pairs = lang.pages[page];
    
    Object.keys(pairs).forEach(key => {
      content = content.replace(new RegExp(`<%=\\s*${ key }\\s*>`, 'g'), pairs[key]);
    });
    
    fs.writeFileSync(outputPath, content);
  });
});

[
  {
    "lang": "zh-CN",
    "pages": {
      "index": {
        "1": "网站快速成型工具",
        "2": "Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库",
        "3": "指南",
        "4": "了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。",
        "5": "查看详情",
        "6": "组件",
        "7": "使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。",
        "8": "资源",
        "9": "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。",
        "lang": "zh-CN",
        "titleSize": "34",
        "paraSize": "18"
      },
      "component": {},
      "changelog": {
        "1": "更新日志",
        "2": "zh-CN"
      },
      "design": {
        "1": "设计原则",
        "2": "一致",
        "3": "Consistency",
        "4": "反馈",
        "5": "Feedback",
        "6": "效率",
        "7": "Efficiency",
        "8": "可控",
        "9": "Controllability",
        "10": "一致性 Consistency",
        "11": "与现实生活一致：",
        "12": "与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；",
        "13": "在界面中一致：",
        "14": "所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。",
        "15": "反馈 Feedback",
        "16": "控制反馈：",
        "17": "通过界面样式和交互动效让用户可以清晰的感知自己的操作；",
        "18": "页面反馈：",
        "19": "操作后，通过页面元素的变化清晰地展现当前状态。",
        "20": "效率 Efficiency",
        "21": "简化流程：",
        "22": "设计简洁直观的操作流程；",
        "23": "清晰明确：",
        "24": "语言表达清晰且表意明确，让用户快速理解进而作出决策；",
        "25": "帮助用户识别：",
        "26": "界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。",
        "27": "可控 Controllability",
        "28": "用户决策：",
        "29": "根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；",
        "30": "结果可控：",
        "31": "用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"
      },
      "guide": {
        "1": "设计原则",
        "2": "导航"
      },
      "nav": {
        "1": "导航",
        "2": "导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。",
        "3": "选择合适的导航",
        "4": "选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。",
        "5": "侧栏导航",
        "6": "可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。",
        "7": "一级类目",
        "8": "适用于结构简单的网站：只有一级页面时，不需要使用面包屑。",
        "9": "二级类目",
        "10": "侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。",
        "11": "三级类目",
        "12": "适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。",
        "13": "顶部导航",
        "14": "顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。",
        "15": "适用于导航较少，页面篇幅较长的网站。"
      },
      "resource": {
        "1": "资源",
        "2": "整理中",
        "3": "Axure Components",
        "4": "通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件",
        "5": "下载",
        "6": "Sketch Template",
        "7": "从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格",
        "8": "组件交互文档",
        "9": "进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节",
        "paraHeight": "1.8",
        "placeholder1": "整理中",
        "placeholder2": "设计资源正在整理和完善中"
      }
    }
  },
  {
    "lang": "en-US",
    "pages": {
      "index": {
        "1": "A Desktop UI Library",
        "2": "Element, a Vue 2.0 based component library for developers, designers and product managers",
        "3": "Guide",
        "4": "Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.",
        "5": "View Detail",
        "6": "Component",
        "7": "Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.",
        "8": "Resource",
        "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.",
        "lang": "en-US",
        "titleSize": "34",
        "paraSize": "18"
      },
      "component": {},
      "changelog": {
        "1": "Changelog",
        "2": "en-US"
      },
      "design": {
        "1": "Design Disciplines",
        "2": "Consistency",
        "3": "",
        "4": "Feedback",
        "5": "",
        "6": "Efficiency",
        "7": "",
        "8": "Controllability",
        "9": "",
        "10": "Consistency",
        "11": "Consistent with real life: ",
        "12": "in line with the process and logic of real life, and comply with languages and habits that the users are used to.",
        "13": "Consistent within interface: ",
        "14": "all elements should be consistent, such as: design style, icons and texts, position of elements, etc.",
        "15": "Feedback",
        "16": "Operation feedback: ",
        "17": "enable the users to clearly perceive their operations by style updates and interactive effects.",
        "18": "Visual feedback: ",
        "19": "reflect current state by updating or rearranging elements of the page.",
        "20": "Efficiency",
        "21": "Simplify the process: ",
        "22": "keep operating process simple and intuitive.",
        "23": "Definite and clear: ",
        "24": "enunciate your intentions clearly so that the users can quickly understand and make decisions.",
        "25": "Easy to identify: ",
        "26": "the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.",
        "27": "Controllability",
        "28": "Decision making: ",
        "29": "giving advices about operations is acceptable, but do not make decisions for the users.",
        "30": "Controlled consequences: ",
        "31": "users should be granted the freedom to operate, including canceling, aborting or terminating current operation."
      },
      "guide": {
        "1": "Design Disciplines",
        "2": "Navigation"
      },
      "nav": {
        "1": "Navigation",
        "2": "Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.",
        "3": "Choose the right navigation",
        "4": "An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation",
        "5": "Side Navigation",
        "6": "Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.",
        "7": "Level 1 categories",
        "8": "Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.",
        "9": "Level 2 categories",
        "10": "Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.",
        "11": "Level 3 categories",
        "12": "Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.",
        "13": "Top Navigation",
        "14": "Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.",
        "15": "Suitable for sites with few navigations and large chunks."
      },
      "resource": {
        "1": "Resource",
        "2": "Under construction.",
        "3": "Axure Components",
        "4": "By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.",
        "5": "Download",
        "6": "Sketch Template",
        "7": "Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.",
        "8": "Interaction Design Documentation",
        "9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.",
        "paraHeight": "1.6",
        "placeholder1": "Under construction",
        "placeholder2": "More resources are being developed"
      }
    }
  },
  {
    "lang": "es",
    "pages": {
      "index": {
        "1": "Un kit de interfaz de usuario para la web",
        "2": "Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto",
        "3": "Guía",
        "4": "Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.",
        "5": "Ver detalle",
        "6": "Componentes",
        "7": "Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.",
        "8": "Recursos",
        "9": "Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.",
        "lang": "es",
        "titleSize": "34",
        "paraSize": "18"
      },
      "component": {},
      "changelog": {
        "1": "Lista de cambios",
        "2": "es"
      },
      "design": {
        "1": "Disciplinas de diseño",
        "2": "Consistencia",
        "3": "",
        "4": "Comentarios",
        "5": "",
        "6": "Eficiencia",
        "7": "",
        "8": "Control",
        "9": "",
        "10": "Consistencia",
        "11": "Consistente con la vida real: ",
        "12": "en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.",
        "13": "Consistente dentro de la interfaz: ",
        "14": "todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.",
        "15": "Comentarios",
        "16": "Comentarios sobre la operación: ",
        "17": "Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.",
        "18": "Comentarios visuales: ",
        "19": "Refleja el estado actual al actualizar o reorganizar los elementos de la página.",
        "20": "Eficiencia",
        "21": "Simplifica el proceso: ",
        "22": "Mantiene el proceso operativo simple e intuitivo.",
        "23": "Bien definido y claro: ",
        "24": "Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.",
        "25": "Fácil de identificar: ",
        "26": "La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.",
        "27": "Control",
        "28": "Toma de decisiones: ",
        "29": "Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.",
        "30": "Consecuencias controladas: ",
        "31": "Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales."
      },
      "guide": {
        "1": "Disciplinas de diseño",
        "2": "Navegación"
      },
      "nav": {
        "1": "Navegación",
        "2": "La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.",
        "3": "Elige la navegación correcta",
        "4": "Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.",
        "5": "Navegación lateral",
        "6": "Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.",
        "7": "Categorías de Nivel 1",
        "8": "Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.",
        "9": "Categorías de Nivel 2",
        "10": "La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.",
        "11": "Categorías de Nivel 3",
        "12": "Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.",
        "13": "Navegación superior",
        "14": "Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.",
        "15": "Adecuado para sitios con pocas navegaciones y grandes trozos."
      },
      "resource": {
        "1": "Recursos",
        "2": "En construcción",
        "3": "Componetes de Axure",
        "4": "Mediante la importación de elementos de interfaz de usuario en Axure, se puede aplicar fácilmente a todos los componentes que proporcionamos durante el diseño de interacción.",
        "5": "Descarga",
        "6": "Plantilla de Sketch",
        "7": "Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.",
        "8": "Documentación de diseño de interacción",
        "9": "Eche un vistazo más de cerca a la documentación de diseño de interacción. Conoce más detalles de cada componente desde una perspectiva microcósmica.",
        "paraHeight": "1.6",
        "placeholder1": "En construcción",
        "placeholder2": "Se están desarrollando más recursos"
      }
    }
  }
]

try {
    fs.statSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));
  } catch (e) {
    fs.mkdirSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));
  }

Object.keys(lang.pages).forEach(page => {
    var templatePath = path.resolve(__dirname, `../../examples/pages/template/${ page }.tpl`);
    var outputPath = path.resolve(__dirname, `../../examples/pages/${ lang.lang }/${ page }.vue`);
    var content = fs.readFileSync(templatePath, 'utf8');
    var pairs = lang.pages[page];
    
    Object.keys(pairs).forEach(key => {
      content = content.replace(new RegExp(`<%=\\s*${ key }\\s*>`, 'g'), pairs[key]);
    });
    
    fs.writeFileSync(outputPath, content);
  });

var content = fs.readFileSync(templatePath, 'utf8');

 Object.keys(pairs).forEach(key => {
      content = content.replace(new RegExp(`<%=\\s*${ key }\\s*>`, 'g'), pairs[key]);
    });

fs.writeFileSync(outputPath, content);

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

node --version

npm --version

npx --version

npm install --global gulp-cli

npx mkdirp my-project

cd my-project 

npm init

npm install -save-dev gulp

gulp --version

function defaultTask (cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask;

gulp

function defaultTask (cb) {
  // place code for your default task here
  console.log(111)
  cb();
}

exports.default = defaultTask;

export default 'foo'

'use strict';

module.exports = 'foo';

require('./bundle.js')   // 'foo'

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = 'foo';

require('./bundle.js')  // { default: 'foo '}

require('./bundle.js').default

'use strict';
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = 'foo';
module.exports = exports['default'];

require('./bundle.js')  // 'foo'