{
  "name": "minipack",
  "version": "1.0.0",
  "description": "",
  "author": "Lorne Zhang",
  "license": "MIT",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-traverse": "^6.26.0",
    "babylon": "^6.18.0",
    "eslint": "^4.17.0",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-plugin-import": "^2.8.0"
  },
  "devDependencies": {
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-prettier": "^2.6.0",
    "prettier": "^1.10.2"
  }
}

export const name = 'world';

import {name} from './name.js';

export default `hello ${name}!`;

import message from './message.js';

console.log(message);

/**
 * 模块打包器将小的程序段编译成浏览器可以执行的更大更复杂的程序。
 * 这些小块仅仅是Javascript文件和模块之间的依赖。
 * （https://webpack.js.org/concepts/modules）。
 *
 * 模块打包器有一个入口文件的概念。代替在浏览器中添加一些脚本标签
 * 并且让他们运行，我们告诉打包器哪个文件是应用的主文件，这是引导
 * 整个应用程序的文件。
 *
 * 我们的打包器将从这个入口文件开始，它尝试去理解文件直接的依赖。
 * 然后，它尝试去理解文件依赖的依赖。它会持续的这么做直到算出应用
 * 的每个模块以及和其他模块的依赖关系。
 *
 * 这种理解工程的方式称为 dependency graph(依赖关系图).
 *
 * 在这个例子里，我们讲创建一个依赖关系图并且将它的所有模块打包到
 * 一个包里。
 *
 * 让我们开始吧
 *
 * 请注意：这是一个非常简单的例子。像依赖循环、捕获模块导出，解析
 * 每个模块我们仅仅处理一次，以便让例子尽可能的简单。
 */


const fs = require('fs')
const path = require('path')
const babylon = require('babylon')
const traverse = require('babel-traverse').default
const babel = require('babel-core')

let ID = 0;
// 我们从创建一个函数开始，它会接受一个文件路径，读取它的内容
// 并且取出它的依赖
function createAsset(filename) {
  // 读取文件内容作为一个字符串
  const content = fs.readFileSync(filename, 'utf-8');

  // 现在，我们尝试计算出这个文件所依赖的文件。我们可以通过它的字符串导入
  // 的方式来查看。然后，这是笨方法，因此，我们可以使用一个JavaScript解析器。
  //
  // JavaScript解析器是一个可以读取和理解JavaScript代码的工具。它可以
  // 帮我们把代码生成一个更抽象的模型称为AST(abstract syntax tree--抽象语法树)。
  //
  // 我强烈建议你使用AST Explorer（http://astexplorer.net）看看AST的样子。
  // AST 包含了我们代码的很多信息。我们可以通过查询它来理解我们的代码试图做什么。
  const ast = babylon.parse(content, {
    sourceType: 'module',
  });

  // 这个数组将管理这个模块所依赖的模块的相对路径
  const dependencies = [];

  // 我们遍历AST，试图理解这个模块依赖了哪些模块，为此，
  // 我们检查AST上的每一个重要声明。
  traverse(ast,{
    // EcmaScript 模块是相当容易的，因为他们是静态的。这意味着你并不需要导入一
    // 个变量， 或可选的导入另一个模块。每次我们看到一个导入声明，我们仅仅接纳
    // 它的值作为一个依赖.
    ImportDeclaration:({node})=> {
      // 我们把这个值放进一个依赖数组中。
      dependencies.push(node.source.value);
    },
  });
  // 通过创建一个简单的累加器，我们为这个模块分配一个唯一标识符。
  const id = ID++;
  // 我们使用的ECMASript模块和其他的JavaScript功能可能并没有被所有的浏览器支持。
  // 为了确保我们的包在所有的浏览器都可以运行，我们将用babel转换它
  //（看https://babeljs.io）
  //
  // ‘presets’操作性是一个规则集合，它告诉babel怎么样转换我们的代码。我们用
  // ‘babel-preset-env’来把我们的代码转换成大多数浏览器可以运行的代码。
  const {code} = babel.transformFromAst(ast, null, {
    presets: ['env'],
  });

  // 返回关于这个模块的所有信息
  return {
    id,
    filename,
    dependencies,
    code,
  };
}

// 现在我们能够提取一个模块的依赖，我们会继续提取入口文件的依赖。
//
// 然后，我们继续提取它的依赖的每一个依赖。我们依次进行直到计算出
// 应用程序的每一个依赖并且他们如何依赖其他的模块。这个理解过程称
// 依赖图。
function createGraph(entry) {
  // 从解析依赖的入口文件开始
  const mainAsset = createAsset(entry);

  // 我们使用一个队列去解析每一个资源的依赖。为此我们使用入口资源
  // 定义一个数组。
  const queue = [mainAsset];
  // 我们使用一个‘for ... of’循环去迭代这个队列。最初的队列只有
  // 一个资源，但是随着我们的迭代它将加入新资源到队列中。当队列为
  // 空循环终止。
  for(const asset of queue) {
    // 我们的每一个资源有它所依赖的模块的相对路径列表。我们要对他
    // 们进行迭代，解析他们用我们的‘createAsset()’函数，追踪这
    // 个模块在此对象中的依赖。
    asset.mapping = {};
    // 这是这个模块所在的目录
    const dirname = path.dirname(asset.filename);
    // 我们遍历其依赖项的相对路径列表。
    asset.dependencies.forEach(relationPath => {
      // 我们的‘createAsset()’函数希望一个绝对路径。依赖数组是
      // 一个相对路径依赖数组。这些路径相对于导入他们的文件。我们
      // 通过加入他的父资源的目录路径可以把它的相对路径转换为绝对
      // 路径。
      const absolutePath = path.join(dirname, relationPath);
      // 解析资源，读取它的内容，提取它的依赖。
      const child = createAsset(absolutePath);
      // 知道资源所依赖的'子资源'对我们来说是必要的。我们通过给
      // 'mapping'对象用子资源的id添加一个新属性来表达这种关系。
      asset.mapping[relationPath] = child.id;

      // 最后，我们添加子资源到我们的队列，因此它的依赖项也将被迭
      // 代和解析。
      queue.push(child);
    });
  }

  // 此时，队列只是包含目标应用程序中每个模块的组数。
  return queue;
}

// 接下来，我们定义一个函数，将使用我们的依赖图并且返回一个浏览器可以
// 运行的包。
//
// 我们的包仅仅是一个自我调用的函数：
//
// (function() {})()
//
// 函数将接收仅仅一个参数：携带我们关系图中每一个模块信息的对象
function bundle(graph) {
  let modules = '';

  // 在我们得到我们的函数体之前，我们讲构造这种参数。请注意我们
  // 正在构建的这个字符串被两个花括号包装。因此对于每一个模块，
  // 我们添加一个这种形式的字符串：‘key:value’。
  graph.forEach(mod => {
    // 关系图中的每一模块在这个对象中都有一个入口。我们使用模块
    // id作为key，使用一个数组作为值（我们的每个模块有两个值）
    //
    // 第一个值是用函数封装的每一个模块的代码，这是因为模块的作
    // 用域应该是：在一个模块中定义的变量不应该影响其他的作用域
    // 或全局作用域。
    //
    // 我们的模块，我们转换他们之后，使用CommonJS 模块系统：
    // 他们希望一个‘require’，一个‘module’和一个'exports'
    // 对象可用。这些在浏览器中通常是不可用的，因此我们将实现
    // 他们并且把他们注入我们的函数封装器。

    // 对于第二个值，我们字符串化了模块和它的依赖之间的映射。这
    // 是一个对象，看起来像这样：
    // {'./relative/path':1 }。
    //
    // 这是因为被转换的模块代码以及调用了携带相对路径的‘require’.
    // 当这个函数被调用时，我们应该能够知道和模块一致的这个模块的
    // 相对路径。
    modules +=  `${mod.id}: [
       function (require, module, exports) {
         ${mod.code}
       },
        ${JSON.stringify(mod.mapping)},
     ],`;
  })

  // 最后，我们实现这个自我调用函数。
  //
  // 我们通过创建‘require()’函数开始：它接受一个模块id并且查找它
  // 在我们之前构造的模块对象。我们讲解构我两个值的数组来得到我们的
  // 函数封装器和映射对象。
  //
  // 我们的模块代码调用携带相对路径的‘require()’代替模块的id。我
  // 们的require函数需要模块ids。此外，两个模块可能‘require()’
  // 相同的相对路径但意味着不同的模块。
  //
  // 为了处理这个，但一个模块被需要的时候我们创建一个新的，使用专用
  // 的‘require’函数让它去使用。它将特定于该模块，并且知道如何使用
  // 模块的映射对象转换相对路径为模块的映射对象。
  //
  // 最后，用CommonJS，当一个模块被需要时，它能够通过可变的它的
  // ‘exports’导出它的值.'exports'对象，它通过模块代码更改之后，
  // 被通过'require()'函数返回。
  const result = `
    (function(modules) {
      function require(id) {
        const [fn, mapping] = modules[id];

        function localRequire(relationPath) {
          return require(mapping[relationPath]);
        }

        const module = { exports: {} };

        fn(localRequire,module,module.exports);

        return module.exports;
      }

      require(0);
    })({${modules}})
  `;

  // 我们只是返回结果，OK！
  return result;
}

const graph = createGraph('./example/entry.js');
const result = bundle(graph);

console.log(result);

$ node bundle.js

(function(modules) {
      function require(id) {
        const [fn, mapping] = modules[id];

        function localRequire(relationPath) {
          return require(mapping[relationPath]);
        }

        const module = { exports: {} };

        fn(localRequire,module,module.exports);

        return module.exports;
      }

      require(0);
    })({0: [
       function (require, module, exports) {
         "use strict";

var _message = require("./message.js");

var _message2 = _interopRequireDefault(_message);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

console.log(_message2.default);
       },
        {"./message.js":1},
     ],1: [
       function (require, module, exports) {
         "use strict";

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

var _name = require("./name.js");

exports.default = "hello " + _name.name + "!";
       },
        {"./name.js":2},
     ],2: [
       function (require, module, exports) {
         "use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var name = exports.name = 'world';
       },
        {},
     ],})

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.3/install.sh | bash

$ nvm install 10.0.1

$ nvm use 6.9.0

$ nvm use 6.9.0
$ nvm install 6.10.3
$ nvm use 6.10.3

$ [sudo] npm install npm -g

$ node -v
$ npm -v

$ npm install npm@lastest -g

$ npm install npm@next -g

$ npm install

$ npm install <packageName>

$ npm install <packageName> --force

"dependencies": {
	"my_dep": "^1.0.0",
	"another_dep": "~2.2.0"
}

$ npm install <pageage_name>

npm install @scope/package-name

ls node_moudules

npm install example-package@beta

npm install -g <package_name>

$ npm update <packageName>

$ npm outdated -g --depth=0

$ npm update -g <package_name>

$ npm update -g

$ npm view react

// npm view 的别名
$ npm info react
$ npm show react
$ npm v react

dist
.tarball https://registry.npm.taobao.org/element/download/element-0.1.4.tgz
.shasum: 1642279061328a574a692e0e5184e62c180a6685

// 没有作用域的包
npm uninstall <package_name>
// 包含作用域的包
npm uninstall <@scope/package_name>

npm uninstall lodash

// 非作用域包
npm uninstall --save <package_name>
// 作用域包
npm uninstall --save <@scope/package_name>

npm uninstall --save lodash

// 非作用域包
npm uninstall -g <package_name>
// 作用域包
npm uninstall -g <@scope/package_name>

$ npm install --timing

npm config set registry https://registry.npmjs.org/

cnpm install express

$ npm config get cache
/Users/zhangfeilong/.npm

$ ls ~/.npm

du -sh *

$ rm -rf ~/.npm/*
# 或者
$ npm cache clean

$ npm install --cache-min 99999 <package-name>

$ npm install --cache-min Infinity <package-name>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>hello-world</title>
  <link href="/app.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but hello-world doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

// 安装命令
$ npm install vue-router

// main.js
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

// routes.js
import HelloWorld from './components/HelloWorld'
const routes = [
    {path: '/', component: HelloWorld, name:'home'}
]

export default routes

// main.js
import routes from'./routes'
const router = new VueRouter({
  routes
})

// main.js
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

// routes.js
{ path:'/user/:id', component:User}

// HelloWorld.vue
<router-link to="/user/123">张三-single params</router-link><br>

<template>
    <div>User
        {{ this.$route.params.id }}  // 123
    </div>
</template>

// routes.js
{ path:'/user/:userName/userId/:id', component:User},  

// HelloWorld.vue
<router-link to="/user/王五/userId/789">王五-mutiple params</router-link>

// User.vue
<template>
    <div>User
        {{ this.$route.params }}  //  { "userName": "王五", "id": "789" }
    </div>
</template>

// HelloWorld.vue
      <router-link to="/user/Query/userId/101?code=123">Query</router-link><br>
      <router-link to="/user/Hash/userId/102#hash=123">Hash</router-link><br>

// User.vue
<template>
    <div>User
        {{ this.$route.query }}  // { "code": "123" }
        {{ this.$route.hash }}  // #hash=123  原路径：http://localhost:8081/#/user/Hash/userId/102#hash=123
    </div>
</template>

// routes.js
{ path:'/icon-:flower(\\d+).png', component:User},

// HelloWorld.vue
 <router-link to="/icon-flower123">正则匹配</router-link><br>

// User.vue
<template>
    <div>User
        {{ this.$route.hash }}  // /icon-flower123  原路径：http://localhost:8081/#/icon-flower123
    </div>
</template>

// routes.js
const routes = [
  // ...
  { path:'/user-*', component:User},
  { path:'*', component:User}
]

// HelloWorld.vue
<router-link to="/user-admin">*Admin</router-link><br>
<router-link to="/none">404</router-link><br>

// User.vue--*Admin
<template>
    <div>User
      {{ this.$route.params.pathMatch }} // admin
    </div>
</template>

// User.vue--404
<template>
    <div>User
      {{ this.$route.params.pathMatch }} // /none
    </div>
</template>

// NestedRoutes.vue
<template>
    <div>
        <a href="/">←返回</a><br>
        <router-link to="/nestedRoutes/profile">profile</router-link><br>
        <router-link to="/nestedRoutes/archive">archive</router-link><br>
        <p>NestedRoutes</p>
        <router-view></router-view>
    </div>
</template>

// routes.js 嵌套路由
  {path:'/nestedroutes', component: NestedRoutes, name: 'nestedroutes',
   children: [
     {path:'profile', component: resolve => require(['./components/nested-routes/Profile'],resolve)}, // 匹配  /nestedroutes/profile
     {path:'archive', component: resolve => require(['./components/nested-routes/Archive'],resolve)}   // 匹配  /nestedroutes/archive
   ]
  },

// 嵌套路由
  {path:'/nestedroutes', component: NestedRoutes, name: 'nestedroutes',
   children: [
     {path:'', component: resolve => require(['./components/nested-routes/NestedRoutesHome'],resolve)},
     {path:'profile', component: resolve => require(['./components/nested-routes/Profile'],resolve)},
     {path:'archive', component: resolve => require(['./components/nested-routes/Archive'],resolve)}
   ]
  },

router.push(location, onComplete?, onAbort?)

 <!--path-->
<button @click="$router.push('programmatic-navigation')">Path</button><br>
 <!--object-->
<button @click="$router.push({path:'programmatic-navigation'})">Object</button><br>
<!-- named route-->
<button @click="$router.push({name:'programmatic-navigation', params: { id:123 }})">NamedRoute</button><br>
 <!--with query  reuslting in /programmatic-navigation?id=123-->
<button @click="$router.push({path:'programmatic-navigation', query:{ id:123 }})">Query</button><br>

// routes.js
{ path:'/programmatic-navigation/params=/:id', component: resolve => require(['./components/programmatic-navigation/ProgrammaticNavigation'],resolve), name: 'programmatic-navigation-params' },

// ProgrammaticNavigation.vue
<!--传递参数  返回 /programmatic-navigation/params=/123-->
      <button @click="$router.push({ name:'programmatic-navigation-params', params: { id }})">WidthParmas01</button><br>
      <button @click="$router.push({ path:`/programmatic-navigation/params=/${ id }`})">WidthParmas02</button><br>

ProgrammaticNavigation.vue
<template>
    <div>

        <a href="/">←返回</a><br>
        <p>ProgrammaticNavigation</p>
        <pre>{{ JSON.stringify(params) }}</pre>

        <button @click="$router.push({ path:`/programmatic-navigation/params=/${ 456 }`})">WidthParmas03</button><br>
    </div>
</template>

<script>

  export default {
    name: "ProgrammaticNavigation",
    data() {
      return {
        params:this.$route.params
      }
    },
    beforeRouteUpdate (to, from, next) {
      if (to.path == '/programmatic-navigation/params=/456') {
        this.params = to.params
      }
    }
  }
</script>

// 后退一页
router.go(-1)
// 前进一页
router.go(1)
// 如果没有，导航失败，页面保持不变
router.go(10)

// routes.js
  {
    path:'/named-routes/:id',
    component: resolve => require(['./components/named-routes/NamedRoutes'],resolve),
    name:'named-routes'
  },

// HelloWorld.vue
<router-link :to="{name: 'named-routes', params: { id:123 }}">named-routes router-link</router-link><br>
<button @click="$router.push({name: 'named-routes', params: { id:123 }})">named-routes router.push</button>

  // routes.js 命名View
  {
    path:'/named-views',
    component: resolve => require(['./components/named-views/NamedViews'],resolve),
    children: [
      {
        path:'',
        components: {
          default:resolve => require(['./components/named-views/ViewA'],resolve),
          b: resolve => require(['./components/named-views/ViewB'],resolve),
          c: resolve => require(['./components/named-views/ViewC'],resolve),
        },
      }
    ]
  },

// NamedViews.vue
<template>
    <div>
        <a href="/">←返回</a><br>
        <p>NamedViews</p>
        <router-view></router-view>
        <router-view name="b"></router-view>
        <router-view name="c"></router-view>
    </div>
</template>

// NestedNamedViews.vue
<template>
    <div>
        <p>NestedNamedViews</p>
        <ViewNav/>
        <router-view></router-view>
        <router-view name="b"></router-view>
    </div>
</template>

// routes.js
{ path: '/nested-named-views',
    component: resolve => require(['./components/named-views/NestedNamedViews'], resolve),
    children: [
      {
        path:'profile',
        component: resolve => require(['./components/nested-routes/Profile'],resolve)
      },
      {
        path:'archive',
        components: {
          default:resolve => require(['./components/named-views/ViewA'],resolve),
          b: resolve => require(['./components/named-views/ViewB'],resolve),
        }
      }
    ]
  },

// routes.js
  {
    path:'/orignal01' ,redirect: '/forward'
  },
  {
    path:'/orignal02' ,redirect: {name: 'forward'}
  },

// routes.js
{
    path: '/forward',
    name: 'forward',
    component: resolve => require(['./components/redirect-views/RedirectViews'], resolve),
    alias: '/alias'
  },

// routes.js
{
    path: '/props-to-route/:id',  // http://10.221.40.28:8080/props-to-route/123
    component: resolve => require(['./components/props-route/PropsRoute'], resolve),
    props: true
  },

// routes.js
  {
    path: '/static',  // http://10.221.40.28:8080/static
    component: resolve => require(['./components/props-route/PropsRoute'], resolve),
    props: {name: 'static'}
  },

// routes.js
  {
    path: '/function-mode', // http://10.221.40.28:8080/function-mode?keyword=%27beijing%27
    component: resolve => require(['./components/props-route/PropsRoute'], resolve),
    props: (route) => ({ query: route.query.keyword})
  },

router.beforeEach((to, from, next) => {
  // ...
})

router.afterEach((to, from) => {
  // ...
})

router.afterEach((to, from) => {
  // ...
})

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

beforeRouteEnter (to, from, next) {
  next(vm => {
    // access to component instance via `vm`
  })
}

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // make sure to always call next()!
  }
})

<transition>
  <router-view></router-view>
</transition>

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}

const Bar = {
  template: `
    <transition name="fade">
      <div class="bar">...</div>
    </transition>
  `
}

<template>
    <div>
        <div>
            <router-link to="subviewa">subviewa</router-link><br>
            <router-link to="subview-b">subview-b</router-link><br>
            <p>Home</p>
            <transition :name="transitionName">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>

<script>
  export default {
    name: "Home",
    data() {
      return {
        transitionName: 'slide-left'
      }
    },
    beforeRouteUpdate (to, from, next) {
      this.transitionName = to.path < from.path ? 'slide-right' : 'slide-left'
      next()
    },
  }
</script>

<style scoped>
    .slide-left-enter, .slide-right-leave-active {
        opacity: 0;
        transform: translateX(10px);
    }
    .slide-left-leave-active, .slide-right-enter {
        opacity: 0;
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
</style>

<template>
    <div>
        <div v-if="loading">
            Loading
        </div>
        <div v-if="error">
            {{ error }}
        </div>
        <div v-if="list" >
            <div v-for=" item in list" :key="item.id">
                <p>{{ item.title }}</p>
            </div>
        </div>
    </div>
</template>

<script>
import  TodoAPI  from '../api/todo';
    export default {
        name: "TodoList",
        data () {
            return {
                loading: false,
                list: null,
                error: null
            }
        },
        created () {
            // 组件创建时获取数据
            this.fetchData()
        },
        watch: {
            // 路由改变的时候再次调用方法
            '$route': 'fetchData'
        },
        methods: {
            fetchData () {
                this.error = this.list = null
                // 模拟网络请求
                TodoAPI.getTodoList(
                    (todolist) => {
                    this.loading = false,
                    this.list = todolist
                },
                (error)=>{
                    this.loading = false,
                    this.error = error
                })
            }
        }
    }
</script>

// 网络请求API -- todo.js
const _todoList = [
    {"id": 1, "title": "购物"},
    {"id": 2, "title": "回复邮件" }
]

export default ({
    getTodoList (cb,errorCb) {
        setTimeout(() => {
            Math.random() > 0.5
            ? cb(_todoList)
            : errorCb("数据请求失败")
        },1000)
    }
})

const scrollBehavior = function (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    const postion = {}

    if (to.hash) {
      postion.selector = to.hash
      if (to.hash === '#anchor2') {
        postion.offset = {y: 100 }
      }
      if (/^#\d/.test(to.hash) || document.querySelector(to.hash)) {
        return postion
      }
      return false
    }

    return new Promise(resolve => {
      if (to.matched.some(m => m.meta.scrollToTop)) {
        postion.x = 0
        postion.y = 0
      }

      this.app.$root.$once('triggerScroll', () => {
        resolve(postion)
      })
    })
  }
}

const router = new  VueRouter({
  mode: 'history',
  scrollBehavior,
  routes,
})

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

if (to.hash) {
      postion.selector = to.hash

      if (to.hash === '#anchor2') {
        postion.offset = {y: 100 }
      }

     // ...
    }

return new Promise(resolve => {
// 如果匹配scrollToTop，我们就返回顶部
      if (to.matched.some(m => m.meta.scrollToTop)) {
        postion.x = 0
        postion.y = 0
      }

      // 如果空值或无效值，返回当前滚动位置
      this.app.$root.$once('triggerScroll', () => {
        resolve(postion)
      })
    })

const Foo = () => Promise.resolve({ /* component definition */ })

import('./Foo.vue') // returns a Promise

{
    path: '/lazy-route', component: () => import('./components/lazy-route/LazyHome')
  }

{
    path: '/lazyTwo', component: () => import(/* webpackChunkName: "lazy" */ './components/lazy-route/LazyTwo'),
    children: [
      {path: 'lazyThree', component: () => import (/* webpackChunkName: "lazy" */ './components/lazy-route/LazyThree')}
    ]
  },

Tab: 文件和文件夹名自动补全

Ctrl + A ：跳到当前行的开始
Ctrl + E ：跳到当前行的结束
Option + -> : 向前移动一个词 // windows 键盘使用Alt键
Option + <- : 向后移动一个词

Ctrl + L ：清空屏幕
Ctrl + U ：清空光标前的行
Ctrl + K ：清空光标后的行
Ctrl + W ：删除光标前的词（注意与`Ctrl + U`的区别，前者删除一个词，后者清空整行命令）

Ctrl + C ： 关闭你正在运行的任何程序
Ctrl + D ：退出当前命令行窗口
Ctrl + Z ： 暂停当前程序的运行（注意`Ctrl + C`相当于closed，而`Ctrl + Z`相当于stoped）

/ : 顶层目录
. : 当前目录
.. : 父级目录
~ : Home目录
cd ： Home 目录
cd ~ ： Home 目录
cd / : 驱动的根节点
cd - : 你浏览的上一个文件夹或目录
pwd : 展示当前目录路径
cd .. : 移动到父级目录
cd ../.. : 移动两层父级目录

ls：显示目录中文件和子目录的名字
ls -1 : 以每行一个的格式显示文件列表
ls -F : 在每个目录路径后立即显示/(斜杠)，在可执行程序或脚本后显示*（星号），在符号链接后显示@
ls -S : 按文件尺寸从小到大对文件或目录进行排序
ls -l : 长格式的列表。包含文件模式、所有者和组名、修改的日期和时间文件、路径名等
ls -lt : 以文件的修改顺序列出文件（最近修改的在前）
ls -lh : 长清单，以KB、MB或GB表示人类可读的文件大小
ls -la ：列出目录详情，包括隐藏文件、文件时间戳

// du：disk utility 磁盘实用工具
du : 列出子目录的磁盘使用情况
du * : 列表所有子文件夹和文件的磁盘使用情况
du -s [file/folder]: 显示指定文件或文件夹的磁盘使用情况,如果没有指定显示当前目录所在文件的磁盘总尺寸，`-s`：（display）显示指定文件的条目
du -sh : 与`du -s`的区别是多加了一个h，（human-readable）,以可读方式输出，即输出会加上单位，比如Byte，KB，GB等
du -sh * : 查看当前文件夹内文件和目录的大小
du -sh * | sort -nr ： 查看当前文件夹内文件和目录的大小并从大到小排序显示
df -h : 计算系统剩余磁盘空间(disk free)
df -H ： 使用以10为底的大小（而不是1024）计算磁盘剩余空间，最终数字是三位或更少

open + 文件 ： 打开一个文件

// 创建
mkdir <dir> : 创建名称为<dir>的新文件夹
mkdir -p <dir>/<dir> : 创建嵌套文件夹
mkdir <dir1><dir2><dir3> : 一次创建多个文件夹
mkdir ' <dir>' : 创建一个有空格的文件夹
rmdir <dir> ： 删除文件夹（只对空文件夹有效，如果非空文件夹，用下一条命令）
rm -R <dir> : 删除文件夹和它的内容

touch <file> : 以任何拓展名创建文件

// 拷贝
cp <file><dir> : 拷贝一个文件到一个目录
cp <file> <newfile> : 复制当前文件夹下的指定文件
cp <file>~/<dir>/<newfile> : 拷贝当前文件到一个新的文件夹下并重新命名
cp -i <file><dir> : 如果覆写文件会给一个提醒
cp <file1> <file2> /Users/<dir> : 拷贝多个文件到一个文件夹

// 删除
rm <file>  : 删除指定文件（永久删除，谨慎使用）
rm -i <file> : 删除文件时给你一个确认
rm -f <file> : 强制删除不给提醒
rm <file1> <file2> <file3> : 删除多个文件

// 移动
mv <file> <newfilename> : 移动/重命名
mv <file><dir> : 移动一个文件到文件夹，可能覆写已经存在的文件
mv -i <file><dir>  : 移动文件到一个文件夹，覆写文件之前会给提示，如果没有覆写直接移动
mv *.png ~/<dir> : 移动所有的PNG图片从当前文件夹到一个不同的文件夹

sudo x : 以超级用户的权限运行命令
ls -ld : 默认显示home目录的权限
ls -ld <dir> : 显示一个文件夹的读写和访问权限
chmod 755 <file> : 改变一个文件的权限为755，chmod本身表示修改文件权限的意思
chmod -R 600 <dir> : 改变一个文件夹和它的内容的权限为600

ps -ax : 显示操作系统当前运行的所有进程，这里 `a`展示所有用户进程，`x`展示所有未连接到终端的进程
top ： 显示操作系统当前运行程序的时实信息
top -ocpu -s 5 ： 按CPU使用情况排序进程，每5秒更新一次
top -o rsize : 根据内存使用情况进行排序
kill PID : 使用ID<PID>退出进程,可以通过活动监视器查看进程的PID
ps -ax | grep <appname> : 通过名字或PID查找一个进程，`grep`为UNIX工具程序，可做文件内的字符串查找

ping <主机> : Ping主机和显示状态，如ping www.cnblogs.com
whois <域名> : 输出一个域名的查询信息
curl -O <url/to/file> : 下载文件通过HTTP，HTPS，or FTP
ssh <username>@<host> : 建立SSH连接给<host>用<username>这个用户
scp <file> <user>@<host>:/remote/path : 复制文件给一个远程主机

find <dir> -name <"file"> : 发现目录<dir>内文件名为<file>的所有文件.可以使用（*）去搜索文件名部分,如：`find demo01 -name "*.png"`
grep "<text>" <file> : 输出在file中出现的所有<text>文本（添加 -i大小写不敏感）
grep -rl "<text>" <dir> : 搜索<dir>包含<text>文本的所有文件

cat <file> : 输出文件的内容
less <file> : 使用less命令输出<file>内容，支持分页和更多
head <file> : 输出前10行

Ctrl + R ： 搜索之前使用的命令
history n : 展出之前使用过的命令，n为指定查询的条数
![value] : 执行以一个值开头的最后一个被写的命令
!! : 执行最后一个命令

[command] -h : 帮助文档，如git -h
man [command] :展示该命令的帮助手册 ,进入帮助手册后按`wq`退出

Double ⇧：搜索任何东西
⇧⌘O：查找具体的文件名称
⌘E：最近打开的文件
⌘1：工程目录快捷键
⌘↑：打开导航栏

export default {
  name: 'HelloWorld',
  // TODO:find a better way
  props: {
    msg: String
  }
}

⌘F：文件内字符查找
⌘R：执行字符替换或批量替换

Vuex is a state management pattern + library for Vue.js applications.

// App.vue
<template>
  <div id="app">
    <div>
      {{  count }}
      <button @click="$store.commit('increment',2)">count++</button>
      <button @click="$store.dispatch('increment')">count++</button>
    </div>
    <div>
      <div>
              <span>
                  doneTodos:
              </span>
        {{ $store.getters.doneTodos }}
      </div>
      <div>
              <span>
                  doneTodosCount:
              </span>
        {{ doneTodosCount }}
      </div>
      <div>
              <span>
                  getTodoById(2):
              </span>
        {{ $store.getters.getTodoById(2) }}
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'app',
        computed: {
            count () {
                return this.$store.state.count
            },
            doneTodosCount () {
                return this.$store.getters.doneTodosCount
            },

        }
    }
</script>

const store = new Vuex.Store({
  state: {
    count: 1
  }
})
const Counter = {
  template: `<div> {{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}
var vm = new Vue({
  el:'#example',
  components: {Counter},
  template:`<counter></counter>`
})

const Counter = {
  template: `<div> {{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
var vm = new Vue({
  el:'#example',
  store,
  components: {Counter},
  template:`<counter></counter>`
})

<script>
import { mapState }  from 'vuex'
export default {
  name: 'HelloWorld',
  data () {
    return {
      localCount: 5
    }
  },
  computed: mapState({
    // 可以使用箭头函数访问
    count: state => state.count,
    // 给count起一个别名
    countAlias: 'count',
    // 当使用本地数据的时候必须使用函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
</script>

computed: mapState([
  'count'
])

computed: {
  localComputed () { return 1 },
  ...mapState({
    count: state => state.count
  })
}

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

const store = new Vuex.Store({
  state: {
    count: 0,
    todos:[
      {id: 1, text:'...', done:true},
      {id: 2, text:'...', done: false}
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

computed: {
    doneTodos() {
      return this.$store.getters.doneTodos // [ { "id": 1, "text": "...", "done": true } ]
    }
  }

getters: {
  doneTodos: state => {
    return state.todos.filter(todo => todo.done)
  },
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length  // 1
  }
}

getTodoById: (state) => (id) => {
  return state.todos.find(todo => todo.id === id)
}

this.$store.getters.getTodoById(2) //  { "id": 2, "text": "...", "done": false }

computed: {
  ...mapGetters([
    'doneTodos',
    'doneTodosCount'
  ])
}

...mapGetters({
  doneCount: 'doneTodosCount'
})

const store = new Vuex.Store({
	 state: {
	   count: 0
	 },
    mutations: {
    increment (state) {
      state.count ++
    }
  }
})

<template>
 <div>
     <button @click="$store.commit('increment')">++</button> // 1
 </div>
</template>

mutations: {
  increment (state, n) {
    state.count += n
  }
}

<button @click="$store.commit('increment',2)">++</button>

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

<button @click="$store.commit('increment',{amount: 2})">++</button>

store.commit({type:'increment', amount: 2})

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

// mution-type.js
export  const INCREMENT = 'increment'

import { INCREMENT } from './mutaion-types'
  mutations: {
    [INCREMENT] (state, payload) {
      state.count += payload.amount
    }
  }

mutations: {
  [INCREMENT] (state,payload) {
    state.count += payload.amount
  }
}

// HTML
 <button @click="increment({amount: 3})">++</button>
// JS
  methods: {
    ...mapMutations([
      'increment'
    ])
  }

// HTML
 <button @click="add({amount: 3})">++</button>
// JS
  methods: {
    ...mapMutations({
      add: 'increment'
    })
  }

actions: {
  increment (context) {
    context.commit('increment')
  }
}

actions: {
  increment ({commit}) {
   commit('increment')
  }
}

store.dispatch('increment')

incrementAsync({ commit }) {
  setTimeout(() => {
    commit('increment')
  }, 1000)
}

// payload格式
<button @click="$store.dispatch('increment', {amount: 3})">++</button>

// 对象格式
<button @click="$store.dispatch({type: 'increment', amount: 3})">++</button>

actions: {
  increment ({commit}, payload) {
   commit('increment', payload)
  },
}

// JS
import { mapActions }  from 'vuex'
  methods: {
    ...mapActions({
      add: 'increment'
    })
  }

actionA({commit}, payload) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      commit('increment', payload)
        resolve('finish')
    }, 1000)
  })
}