谈谈Vue开发过程中用到的插件

npm i lockr --save  
或者  cnpm i lockr -S 
或者 yarn add lockr

<script src="https://raw.githubusercontent.com/tsironis/lockr/master/lockr.js" type="text/javascript"></script>

Lockr.prefix = 'lockr';
Lockr.set('username', 'clown'); // Saved as string
localStorage.getItem('username');
> null
localStorage.getItem('lockr_username');
> {"data":'clown'}

Lockr.set - 参数: [ key, value ] {String, Number, Array or Object} 
--> 设置一个指定的值，可以是任意类型

Lockr.get - 参数: [ key or hash_key, default value ] 
--> 通过给定的键返回被保存的值，如果指定的键是null或undefined则会返回一个默认值

Lockr.rm - 参数: [ key ] {String}
--> 完全删除指定的键值对

Lockr.sadd - 参数[ key, value ]{String, Number, Array or Object}
--> 追加一个值在之前的基础上面(类似于 push() 方法)

Lockr.getAll()
--> 获取本地存储中所有的键值对

Lockr.flush()
-->清空本地存储 即localStorage.length==0

npm install axios -S 
或者 cnpm install axios -S  
或者 yarn add  axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

var instance = axios.create({
  baseURL: 'https://www.clown.com/api',
timeout: 1000,
  headers: {'X-Custom-Header': 'clown'}
});

axios.request(config)
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

{
   // `url` 是用于请求的服务器URL
  url: '/user',
  // `method` 是在发出请求时使用的请求方法
  method: 'get', // default
 // `baseURL` 除非url是绝对的，否则将预先对url进行预处理。
 //设置baseURL以传递相对url是很方便的。
 // 对该实例的方法。
  baseURL: 'https://some-domain.com/api/',
 // `transformRequest` allows changes to the request data before it is sent to the server
 // This is only applicable for request methods 'PUT', 'POST', and 'PATCH'
 // The last function in the array must return a string, an ArrayBuffer, or a Stream
  transformRequest: [function (data) {
     // Do whatever you want to transform the data
    return data;
  }],
 // `transformResponse` allows changes to the response data to be made before
 // it is passed to then/catch
  transformResponse: [function (data) {
     // Do whatever you want to transform the data
    return data;
  }],
  // `headers` are custom headers to be sent
  headers: {'X-Requested-With': 'XMLHttpRequest'},
   // `params` are the URL parameters to be sent with the request
   // Must be a plain object or a URLSearchParams object
  params: {
     ID: 12345
  },
  // `paramsSerializer` is an optional function in charge of serializing `params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
      return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
   // `data` is the data to be sent as the request body
   // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
   // When no `transformRequest` is set, must be of one of the following types:
   // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
   // - Browser only: FormData, File, Blob
   // - Node only: Stream
  data: {
    firstName: 'Fred'
  },
  // `timeout` specifies the number of milliseconds before the request times out.
  // If the request takes longer than `timeout`, the request will be aborted.
  timeout: 1000,
  // `withCredentials` indicates whether or not cross-site Access-Control requests
 // should be made using credentials
  withCredentials: false, // default
 // `adapter` allows custom handling of requests which makes testing easier.
 // Return a promise and supply a valid response (see [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },
   // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
  // This will set an `Authorization` header, overwriting any existing
  // `Authorization` custom headers you have set using `headers`.
  auth: {
     username: 'janedoe',
     password: 's00pers3cret'
  },
  // `responseType` indicates the type of data that the server will respond with
  // options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default
  // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
  xsrfCookieName: 'XSRF-TOKEN', // default
  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default
   // `onUploadProgress` allows handling of progress events for uploads
  onUploadProgress: function (progressEvent) {
  // Do whatever you want with the native progress event
  },
  // `onDownloadProgress` allows handling of progress events for downloads
  onDownloadProgress: function (progressEvent) {
  // Do whatever you want with the native progress event
  },
  // `maxContentLength` defines the max size of the http response content allowed
  maxContentLength: 2000,
  // `validateStatus` defines whether to resolve or reject the promise for a given
  // HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
  // or `undefined`), the promise will be resolved; otherwise, the promise will be
  // rejected.
  validateStatus: function (status) {
     return status >= 200 && status < 300; // default
  },
 // `maxRedirects` defines the maximum number of redirects to follow in node.js.
 // If set to 0, no redirects will be followed.
  maxRedirects: 5, // default
 // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
 // and https requests, respectively, in node.js. This allows to configure options like
 // `keepAlive` that are not enabled by default.
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
 // 'proxy' defines the hostname and port of the proxy server
 // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and supplies credentials.
 // This will set an `Proxy-Authorization` header, overwriting any existing `Proxy-Authorization` custom headers you have set using `headers`.
  proxy: {
     host: '127.0.0.1',
     port: 9000,
     auth: : {
        username: 'mikeymike',
        password: 'rapunz3l'
     }
   },
  // `cancelToken` specifies a cancel token that can be used to cancel the request
  // (see Cancellation section below for details)
  cancelToken: new CancelToken(function (cancel) {
  })
}

axios.all(iterable)
axios.spread(callback)

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
 // Do something before request is sent
    return config;
  }, function (error) {
   // Do something with request error
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // Do something with response data
   return response;
  }, function (error) {
  // Do something with response error
   return Promise.reject(error);
  });

$ npm i --save lodash 
或者cnpm i lodash -S 
或者yarn add loadsh

import _ form 'loadsh';
_.debounce()  //防抖函数
_.isEmpty()  //判断是否为空

$ npm i --save moment
或者cnpm i moment-S 
或者yarn add moment

 moment.locale("zh-cn");

moment().format('YYYY-MM-DD hh:mm:ss ');

const webpack = require('webpack')
module.exports = {
  chainWebpack: config => {
//  忽略/moment/locale下的所有文件
    config
    .plugin('ignore')
    .use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
  }
}

import moment from 'moment'
//手动引入所需要的语言包
import 'moment/locale/zh-cn';
// 指定使用的语言
moment.locale('zh-cn');

$ npm i --save nprogress
或者cnpm i nprogress-S 
或者yarn add nprogress

<script src='https://unpkg.com/nprogress@0.2.0/nprogress.js'></script>
<link rel='stylesheet' href='https://unpkg.com/nprogress@0.2.0/nprogress.css'/>

import router from './index'
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

// 配置NProgress进度条选项 —— 动画效果
NProgress.configure({ ease: 'linear', speed: 1000, showSpinner: false, minimum: 0.1 })


router.beforeEach((to, from, next) => {
    //开始进度条
    NProgress.start();
    next();
})

//全局后置钩子
router.afterEach((to, from) => {
//NProgress结束进度条
    NProgress.done()
}